Настраиваем полноценную сборку
Перед тем как начать
В предыдущем уроке мы создали нашу первую сцену при помощи самого простого подключения three.js, если вы это пропустили, то советую вернуться!
То, как мы с вами в первом уроке подключили three.js - самый простой вариант. К сожалению, у него есть свои недостатки, а именно при том методе подключения у нас нет доступа к некоторым классам three.js, поскольку иначе файл будет слишком тяжелый.
Поэтому нам нужен другой способ подключения, который бы позволил нам использовать эти спрятанные классы.
Существуем много способов как это можно сделать, но мы воспользуемся одним из самых популярных - соберем свой бандлер.
Что такое бандлер (сборщик)?
Бандлер - это утилита, в которую можно отправлять различные файлы, например, JavaScript, TypeScript, CSS, HTML, медиа и т.д. Бандлер соберет переданную ему статику, применит некоторые модификации к ней и на выходе вернет бандл, который можно напрямую запустить в вебе.
Если копнуть поглубже, то бандлер может делать намного больше. Например, при помощи бандлера можно развернуть локальный сервер, настраивать зависимости, оптимизировать статику, минимизировать код, заливать на сервер и т.д.
Webpack
Webpack - один из популярных самых бандлеров. С его помощью можно сделать практически все, что необходимо для сборки проекта, а так же крайне радует очень хорошо написанная документация и огромное комьюнити разработчиков.
Приступаем к настройке
Для начала давайте загрузим NodeJS.
После загрузки приступим к созданию нужной нам архитиктуре папок.
Откроем терминал, создадим папку проекта и перейдем в нее:
Проинициализируем npm проект:
Далее нам нужно установить необходимые нам пакеты для webpack (их много, но они нужны для нормальной настройки сборки и минификации, сама по себе настройка webpack - та еще магия, если будет много голосов, то могу в дальнейшем записать курс по webpack):
Следующим шагом создадим в папке проекта нужные нам директории:
- В директории bundler - будем хранить все файлы, которые связаны с настройкой бандлера
- В директории src - будут хранится все файлы исходного кода
- В директории static - будет вся статика, которая нужна нам для проекта
Создадим основные файлы настройки webpack:
В файле bundler/webpack.common.js будет храниться общая настройка webpack для сборки для разработки и для итогового прода:
В файле bundler/webpack.dev.js будет храниться настройка webpack для сборки для разработки:
В файле bundler/webpack.prod.js будет храниться настройка webpack для сборки для прода:
Установим three.js:
И изменим скрипты в package.json на:
Давайте переместим базовые файлы, которые мы создали в прошлых уроках и немного их изменим:
Файл src/index.html должен выглядеть примерно вот так (тут мы убрали подключение скриптов, за нас это сделает бандлер):
Файл src/script.js выглядит примерно вот так:
Так же давайте создадим пустой файл со стилями:
И сейчас, запустив в консоли скрипт npm run dev у вас откроется браузер с нашим кубиком, поздравляю!
Я стараюсь создать комьюнити людей, которым интересна веб-разработка, 3d и путешествия, поэтому зову вас присоединиться к моему блогу в telegram!
Следующий урок