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

Важно точно понимать, что входит в цепочку инструментов JavaScript, чтобы собрать свои собственные. Как правило, набор инструментов JS состоит из трех ключевых компонентов:

  • Менеджер пакетов, это дает вам доступ к огромному количеству сторонних пакетов, которые вам понадобятся для создания вашего приложения. Он также управляет зависимостями и предоставляет простой способ обновления и установки пакетов. Два самых популярных менеджера пакетов - это yarn и npm.
  • Сборщик позволит вам писать модульный код и объединять его в небольшие пакеты. Это дает вам возможность оптимизировать ваш сайт и, кроме того, улучшить время загрузки страницы, для более крупных приложений это может быть очень полезным инструментом, не говоря уже о преимуществах SEO, которые можно получить за счет более быстрой загрузки страницы. Я обычно использую webpack, однако parcel и rollup здесь также допустимы.
  • Компилятор позволяет писать современный JS-код, который будет работать в старых браузерах. Преимущество здесь в том, что вы можете использовать современные функции JS, которые по-прежнему будут работать везде. Я обычно использую babel.

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

Теперь, когда мы знаем, какие компоненты нам нужны для настройки нашей среды разработки, мы можем сразу приступить к работе.

Выбор и установка менеджера пакетов

По моему личному опыту, средний разработчик не заметит большой разницы между yarn и npm. Они оба делают одно и то же, предоставляют одинаковый доступ к одним и тем же репозиториям и обычно работают одинаково. При этом есть очень веская причина, по которой yarn изначально был разработан. Об этом можно прочитать здесь. Я обычно использую yarn в своих проектах просто потому, что это то, что я всегда использовал, и это то, что мне удобно использовать, обычно это также быстрее. Важно помнить, что миграцию между npm и yarn также легко выполнить (в зависимости от размера вашего проекта), поэтому изменение вашего мнения не вызовет слишком много головной боли в большинстве сценариев.

Если вы все еще не уверены, какой из них использовать, попробуйте настроить проект с npm, а затем с yarn. Вы заметите, что нет большой разницы, за исключением .lock файлов, которые создаются, и, возможно, очень небольшая разница в скорости, но это может повлиять на ваше решение в дальнейшем.

Чтобы установить диспетчер пакетов на свой компьютер, вам необходимо выполнить соответствующие инструкции в документации:

Инструкции для NPM можно найти здесь.

Инструкции для пряжи можно найти здесь. (Для установки Yarn необходимо установить NPM).

После того, как вы установили и заработали выбранный вами менеджер пакетов, вы готовы перейти к следующему разделу.

Настройка упаковщика

Я предпочитаю webpack. В этом разделе я расскажу, как настроить webpack для локальной разработки. Сначала создайте новый каталог для своего веб-приложения и перейдите к нему в своем терминале. Затем инициализируйте yarn в каталоге и установите webpack как зависимость для разработки:

yarn init -y
yarn add webpack webpack-cli -D

Теперь у вас должен быть pacakge.json файл, который выглядит примерно так:

Вместе с файлом yarn.lock и каталогом node_modules в каталоге вашего проекта.

Теперь создайте index.htmlfile в корне вашего проекта и создайте новый каталог с именем src с новым файлом внутри него с именем index.js.

Ваша файловая структура должна теперь выглядеть примерно так:

Теперь давайте подключим файл JavaScript к файлу HTML и добавим в ваш index.html файл следующий код:

А затем добавьте в свой src/index.js файл следующий код:

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

Теперь вы можете открыть свой index.html файл в веб-браузере и увидеть предупреждение JS с сообщением hello, webpack world!

Однако мы еще не используем webpack. Давайте внесем некоторые изменения, чтобы мы могли начать его использовать.

Сначала создайте каталог с именем dist и переместите в него index.html. Ваш каталог должен выглядеть так:

Затем измените ваш index.html файл так, чтобы он указывал на сценарий с именем main.js вместо ./src/index.js. Этот файл будет сгенерирован веб-пакетом для вас, когда вы его запустите. Теперь это должно выглядеть так:

Теперь запустите yarn webpack в своем терминале. Результат должен выглядеть так:

Здесь мы можем увидеть предупреждение в выводе, потому что webpack ожидает, что режим будет установлен. Пока не беспокойтесь об этом, мы настроим это предупреждение позже.

А пока просто взгляните на свой dist каталог. Теперь в нем должен быть файл с именем main.js. Если вы продолжите и откроете dist/index.html в своем веб-браузере, вы снова увидите предупреждение.

Теперь, когда у нас работает webpack, давайте поработаем с некоторыми параметрами конфигурации, которые избавят от этих предупреждений и помогут немного ускорить процесс разработки.

Сначала создайте новый файл с именем webpack.config.js в корне вашего проекта:

Ваша файловая структура должна выглядеть так:

Теперь попробуйте снова запустить yarn webpack в своем терминале. Теперь вывод должен быть без предупреждений:

Теперь, когда мы устранили наши предупреждения, давайте продолжим и настроим горячую замену модуля, чтобы ускорить итерацию. Горячая замена модулей заменяет, добавляет или удаляет модули во время работы приложения без полной перезагрузки.

Продолжайте и установите webpack-dev-server с помощью следующей команды:

yarn add -D webpack-dev-server

Это позволяет нам обслуживать наше приложение локально и использовать HMR.

Затем обновите ваш webpack.config.js файл, включив в него нашу devServer конфигурацию:

Наконец, давайте добавим сценарий в наш package.json, чтобы мы могли легко запустить его из командной строки.

Затем запустите yarn webpack:development в консоли. Это должно создать ваше приложение, обслуживать его и автоматически открывать на вкладке в вашем браузере. Если вам не нравится функция автоматического открытия, вы можете удалить свойство open из своей devServer конфигурации в webpack.config.js. Затем вы можете вручную перейти к localhost:8080, чтобы получить доступ к своему запущенному приложению.

См. Дополнительную информацию о настройке веб-пакета здесь, если вам требуется дополнительное поведение.

Последний шаг - настроить наш компилятор. Этот шаг важен, потому что без него webpack не сможет анализировать JSX. Для этого воспользуемся babel, давайте установим его:

yarn add -D babel-loader @babel/core @babel/preset-env @babel/preset-react

После того, как мы их установили, мы можем обновить наш webpack.config.js, чтобы начать их использовать.

Наконец, мы можем установить react и react-dom и начать использовать их в нашем приложении.

yarn add react react-dom

Теперь обновите ваш src/index.js файл, чтобы отобразить простой компонент React:

Наконец, нам нужно добавить элемент, чтобы смонтировать наш компонент в dist/index.html

Теперь продолжайте и снова запустите yarn webpack:development, оно должно открыть ваше новое приложение React в вашем браузере:

Теперь, когда у вас есть приложение React, вы можете продолжить и начать разработку по своему усмотрению. Если вы хотите добавить в приложение такие ресурсы, как шрифты и изображения, ознакомьтесь с плагинами для веб-пакетов. Вы также можете указать файл конфигурации webpack для производства отдельно от того, который мы создали в этом руководстве для сборки разработки, а затем использовать сценарии в package.json для запуска предпочтительной конфигурации с флагом webpack--config.

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