Настройка проекта с Webpack и Vite

Для разработки на Babylon.js, как и для большинства современных JavaScript-фреймворков, часто требуется конфигурировать систему сборки. Webpack и Vite — это два популярных инструмента для сборки и разработки проектов на JavaScript. Оба решения предоставляют мощные возможности для настройки и оптимизации процесса разработки, однако у них есть существенные различия, которые могут повлиять на выбор в зависимости от специфики проекта.

Webpack: Настройка для Babylon.js

Установка Webpack

Для начала работы с Webpack, необходимо установить несколько основных пакетов:

npm init -y
npm install webpack webpack-cli webpack-dev-server --save-dev
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install babylonjs --save
  • webpack и webpack-cli — это основные пакеты для запуска и настройки сборки.
  • webpack-dev-server — сервер для локальной разработки, который обновляет страницы при изменении кода.
  • babel-loader и связанные с ним пакеты необходимы для транспиляции современных JavaScript-функций в код, совместимый с различными браузерами.
  • babylonjs — сама библиотека для работы с 3D-графикой.

Настройка Webpack

Для начала необходимо создать файл конфигурации Webpack (webpack.config.js), который будет описывать процесс сборки проекта:

const path = require('path');

module.exports = {
  entry: './src/index.js', // Входная точка вашего приложения
  output: {
    path: path.resolve(__dirname, 'dist'), // Папка для собранных файлов
    filename: 'bundle.js', // Имя итогового файла
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Применяется к файлам с расширением .js
        exclude: /node_modules/, // Исключение папки node_modules
        use: {
          loader: 'babel-loader', // Транспиляция через Babel
          options: {
            presets: ['@babel/preset-env'], // Использование пресета для современных JavaScript возможностей
          },
        },
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000, // Порт, на котором будет запущен сервер
  },
};

Этот конфиг устанавливает точку входа ./src/index.js, где начинается выполнение вашего приложения, и указывает место для вывода собранного кода — в папку dist. Также настройка включает в себя загрузчик Babel, который позволит использовать современные возможности JavaScript.

Создание стартового скрипта

В файле src/index.js можно добавить простую инициализацию сцены Babylon.js:

import * as BABYLON from 'babylonjs';

const canvas = document.getElementById('renderCanvas'); // Получение элемента <canvas>
const engine = new BABYLON.Engine(canvas, true); // Создание движка

const scene = new BABYLON.Scene(engine); // Создание сцены

// Камера
const camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// Свет
const light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);

// Меш
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);

// Рендер
engine.runRenderLoop(() => {
    scene.render();
});

Этот код создаёт базовую сцену с камерой, источником света и простым 3D-объектом — сферой. Он также запускает рендеринг на каждом цикле обновления.

Запуск проекта

Для того чтобы запустить проект в режиме разработки, нужно добавить скрипт в package.json:

{
  "scripts": {
    "start": "webpack serve --mode development --open"
  }
}

После этого можно запустить проект командой:

npm run start

Webpack автоматически соберет проект и откроет его в браузере.

Vite: Быстрая настройка для Babylon.js

Установка Vite

Vite — это инструмент сборки нового поколения, который предлагает быструю разработку благодаря использованию ES-модулей. Установка Vite проще, чем Webpack, и требует меньше настроек.

Для начала нужно установить Vite:

npm init vite@latest
npm install
npm install babylonjs --save

Vite создаст проект с базовой конфигурацией, а вам останется лишь добавить Babylon.js.

Настройка Vite

Основные настройки Vite находятся в файле vite.config.js. В большинстве случаев базовая конфигурация будет работать без изменений, однако при необходимости можно добавить дополнительные плагины или изменить параметры сборки.

Пример файла vite.config.js:

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000, // Порт для локальной разработки
  },
  build: {
    outDir: 'dist', // Папка для выходных файлов
  },
});

Создание стартового скрипта

В файле src/main.js добавляется тот же базовый код инициализации сцены Babylon.js, что и в случае с Webpack:

import * as BABYLON from 'babylonjs';

const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);

const scene = new BABYLON.Scene(engine);

const camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

const light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);

engine.runRenderLoop(() => {
    scene.render();
});

Запуск проекта

Для запуска проекта в Vite достаточно добавить скрипт в package.json:

{
  "scripts": {
    "dev": "vite"
  }
}

После этого проект можно запустить командой:

npm run dev

Vite запустит сервер на порту 3000, и проект будет доступен для просмотра.

Сравнение Webpack и Vite

Производительность

Vite выигрывает в плане скорости сборки и перезагрузки страниц в процессе разработки. Благодаря использованию ES-модулей Vite позволяет моментально загружать только изменённые модули, что значительно ускоряет процесс разработки. Webpack же требует полной пересборки, что может занять больше времени.

Простота настройки

Vite предлагает более простую настройку «из коробки», особенно для небольших проектов. Веб-платформа Webpack требует больше конфигураций, особенно если проект становится сложным.

Поддержка плагинов и расширений

Webpack обладает более обширной экосистемой плагинов, которые можно использовать для различных целей, включая оптимизацию, трансформацию и множество других функций. Vite пока не имеет такого же богатого набора плагинов, но его экосистема растёт с каждым годом.

Развитие и сообщество

Webpack — это зрелая технология, которая используется многими крупными проектами. Vite, в свою очередь, активно развивается и становится всё более популярным среди разработчиков благодаря своей скорости и удобству.

Заключение

Оба инструмента — Webpack и Vite — предлагают хорошие возможности для работы с Babylon.js. Webpack подойдёт для более сложных проектов, требующих тонкой настройки и большого числа плагинов. Vite же будет идеальным выбором для быстрого старта и разработки, особенно в случае небольших или средних проектов, где важна высокая скорость разработки.

Оглавление