Предполагая, что вы хотите использовать новейшие языковые функции

TL;DR

  • Вероятно, вы захотите использовать новые возможности языка JavaScript.
  • Вы, вероятно, захотите поддерживать устаревшие браузеры, такие как IE11, и необычные браузеры Android / IOS.
  • Вероятно, вы хотите, чтобы ваш веб-сайт был продуктивным (объединение CSS / JavaScript)
  • Вы можете стать более эффективным разработчиком, используя такие плагины, как Hot Module Reloading (HMR).
  • Мы обсуждаем, как использовать Webpack и Webpack Dev Server с нулевой конфигурацией.
  • Мы включаем компиляцию с использованием Babel, добавляем поддержку HMR, SCSS, обработки изображений и сборок для разработки и производства.

Каковы основные причины необходимости использования набора инструментов для сборки?

В предыдущем посте мы обсуждали, как вы можете создать веб-приложение сегодня с помощью React, используя текущий синтаксис и функциональность JavaScript, без необходимости компилировать / транспилировать код даже для устаревших браузеров (это делается во время выполнения, а не во время сборки).

На самом деле, однако, вы, вероятно, захотите использовать какой-то набор инструментов для сборки.

Давайте обсудим некоторые преимущества набора инструментов для сборки.

Новый синтаксис / функции языка

Вероятно, вы захотите использовать новый синтаксис / функциональность JavaScript, который еще официально не является частью спецификации. Официальные стандарты ECMAScript часто сильно отстают от того, что разработчики могут и используют в этой области. Это сделано намеренно, так как прежде, чем новый стандарт может быть ратифицирован, он должен быть сначала активно использован и реализован несколькими поставщиками (например, Node, Chromium). Сегодня активно используются многие популярные плагины, которые еще не близки к тому, чтобы официально стать частью стандарта ECMAScript, но со временем могут значительно улучшить читаемость / ремонтопригодность кода.

Максимальная поддержка устаревших браузеров

Вероятно, вы захотите максимизировать кроссбраузерную поддержку. Браузеры необычны, особенно IE и другие старые браузеры. Хотя нам удалось относительно легко запустить наше простое приложение счетчика в IE11 (используя Traceur), мы неизбежно столкнемся с ситуацией, когда это перестанет работать. Когда мы сталкиваемся с проблемами, мы могли бы реализовать полифил или какой-нибудь обходной путь самостоятельно, но зачем добавлять эту ненужную задачу к нашим и без того напряженным рабочим нагрузкам? Сообщество открытого исходного кода уже решило эти проблемы с помощью (элегантных) решений, так почему бы не воспользоваться этим и не избавить себя от головной боли?

Эффективность - основа вашего веб-сайта

Вероятно, вы хотите, чтобы производительность была в основе вашего сайта. Пользователи сети непостоянны, и если вашему сайту потребуется время для загрузки, трафик быстро упадет, что приведет к вероятной потере бизнеса. Ваш веб-сайт также будет оштрафован в результатах поиска, если он медленно загружается, особенно на мобильных устройствах. Как обсуждалось ранее, текущая лучшая практика для обеспечения более быстрой загрузки веб-сайтов - объединить связанные ресурсы в один файл (например, объединить все ваши модули JavaScript в один файл JavaScript). Это удивительно сложный процесс, и, вероятно, вам не захочется делать его вручную. Подобные повторяющиеся и сложные задачи идеально подходят для инструментов сборки.

Вы хотите быть продуктивным разработчиком

Вероятно, вам нужны инструменты повышения эффективности, такие как Hot Module Reloading (HMR). HMR позволяет вам видеть изменения вашего кода в реальном времени без обновления страницы. В нашем примере сборки без инструментария каждый раз, когда мы вносили изменения в наш код, нам приходилось обновлять страницу. Это было хорошо для нашего простого приложения, но по мере того, как приложения станут более сложными, это станет более проблематичным. В нашем примере мы могли увеличивать и уменьшать счетчик и сразу видеть эффект. В нашем коде мы использовали локальное состояние для хранения текущего значения счетчика. Если мы пойдем и внесем изменения в код и обновим страницу, локальное состояние будет потеряно и сброшено на значение по умолчанию (если, конечно, мы не сохраняли его в базе данных или локальном хранилище или еще где-то!). HMR устраняет эту проблему, динамически «обновляя» наши компоненты по мере необходимости. Состояние часто может поддерживаться для нас, чтобы мы могли продолжить с того места, на котором остановились. Аккуратно, да? В настоящее время мне неизвестно о HMR, который работает без какого-либо инструмента для сборки (пожалуйста, поправьте меня, если я ошибаюсь!).

Создайте простую цепочку инструментов React с нуля с помощью Webpack

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

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

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

Почему именно Webpack?

На протяжении многих лет было доступно множество инструментов для создания веб-сайтов. Моим недавним фаворитом была система потоковой сборки Gulp. Gulp не понравился сообществу разработчиков ПО с открытым исходным кодом из-за сложностей, связанных с отладкой, документацией, а также из-за количества кода и сторонних плагинов, необходимых для запуска и работы основ.

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

Итак, почему именно Webpack? Короткий ответ прост, его используют все. Каждая компания, в которой я работаю, использует Webpack, поэтому жизненно важно, чтобы я работал с Webpack на регулярной основе, чтобы быть доступным для решения возникающих проблем. Когда компании, в которых я работаю, начнут использовать разные инструменты, я тоже начну их использовать. Это реальность сегодняшнего разработчика: у вас не всегда есть возможность использовать инструменты, которые вы хотите использовать, и вы почти никогда не работаете над проектами с нуля, поэтому вам приходится иметь дело с тем, что уже есть.

Установка и настройка Webpack

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

Создайте новую папку и добавьте файл package.json следующим образом;

Мы будем использовать React и ReactDOM, поэтому добавим их здесь как dependencies.

Чтобы использовать Webpack, все, что нам нужно, это webpack и webpack-cli, чтобы они были указаны как devDependencies.

Я добавил два скрипта, build:dev и build:prod. Разница проста: сценарий build:prod убирает код (минимизирует его).

Создайте новый файл с именем index.html. Добавьте следующее;

Когда мы вскоре запустим Webpack, он соберет весь наш JavaScript и выгружает его в папку с именем dist с именем main.js. Мы могли бы переопределить это с помощью файла конфигурации, но это выходит за рамки этой публикации.

Теперь давайте продолжим и создадим наше приложение - простое приложение счетчика с кнопками увеличения и уменьшения.

Создайте новую папку с именем src и новый файл с именем index.js и добавьте следующее;

Создайте app.js и добавьте следующее;

И, наконец, создайте counter.js и добавьте следующее;

Это наше основное приложение, написанное и готовое к работе.

В командной строке выполните следующую команду;

npm run build:dev && npm start

Мы не обсуждали npm start. Запуск npm start запустит очень простой веб-сервер, чтобы мы могли видеть, как наше приложение работает в браузере.

Если вы откроете инструменты разработчика и посмотрите на вкладку сети, вы можете увидеть что-то удивительное и, вероятно, довольно шокирующее. Наше маленькое приложение весит безумно 862 КБ. Так что же пошло не так?

Когда мы запускали сборку для разработки с использованием npm run build:dev, наши пакеты содержат все следующее (а также наш код);

  • Пробел.
  • Комментарии.
  • Длинные имена переменных.
  • Повторяющийся код / ​​Нет тряски дерева.
  • Все вышеперечисленное, в том числе для React и ReactDOM.

Когда мы запускаем npm run build:prod, мы получаем все вышеперечисленные преимущества, а размер нашего пакета уменьшается до 111 КБ.

Все еще большой, но значительно лучше, чем раньше.

Добавьте babel, чтобы повысить кроссбраузерность и включить JSX

Прямо сейчас мы не компилируем / не транспилируем какой-либо код. Написанный нами код содержит деструктуризацию, новые ключевые слова ES6, классы и т. Д. Запуск кода в браузере, который плохо поддерживает ES6, приведет к множеству проблем.

При этом код длинный и некрасивый, потому что у нас пока нет поддержки JSX.

Давайте исправим обе эти проблемы одновременно.

Добавьте следующие пакеты с помощью этой команды;

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

Для чего нужны эти пакеты?

  • @babel/core - это ядро ​​компилятора Babel.
  • @babel/preset-env - это предустановка, которая позволяет вам использовать последнюю версию JavaScript, не беспокоясь о том, какие преобразования / полифиллы необходимы для поддержки браузером.
  • @babel/preset-react - это оболочка для нескольких преобразований, которые включают поддержку JSX и многое другое.
  • babel-loader - это плагин для Webpack. Вскоре нам нужно будет указать Webpack использовать Babel.

Чтобы разрешить Webpack использовать Babel, обновите сценарии сборки следующим образом (добавьте — module-bindflag);

"build:dev": "webpack --mode development --module-bind js=babel-loader",
"build:prod": "webpack --mode production --module-bind js=babel-loader",

И последнее, нам нужно сказать Babel использовать наши пресеты. Создайте новый файл с именем .babelrc и добавьте следующий код;

{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

Когда Babel запускается, он будет искать .babelrc и использовать их автоматически.

Теперь, когда эти изменения внесены, мы можем обновить наш counter.js следующим образом;

Это дает на 18 строк меньше кода, хороший выигрыш. Мы также можем спать спокойно, зная, что наши пользователи, которые придерживаются своих устаревших браузеров, также получат полную поддержку при использовании нашего сайта. Победа - победа.

Горячая перезагрузка модуля с помощью Webpack

Убийственная причина использования такого инструмента, как Webpack, - это горячая перезагрузка модуля (HMR). HMR позволяет вам видеть свои изменения в браузере почти сразу после их внесения, обычно без необходимости обновлять страницу или терять состояние приложения.

Чтобы настроить HMR, мы должны сделать следующее;

  • Переключитесь на Webpack Dev Server (http-server здесь бесполезен)
  • Установите react-hot-loader и используйте его в нашем приложении
  • Настройте наши скрипты так, чтобы они вводились в наш HTML во время выполнения, и обойдите несколько ограничений режима нулевой конфигурации Webpack.

У нас много работы, давайте приступим.

Нам нужно больше пакетов, поэтому выполните следующую команду;

npm install --save-dev common-config-webpack-plugin html-webpack-plugin react-hot-loader webpack-dev-server

Для чего нужны эти пакеты?

  • common-config-webpack-plugin содержит набор стандартных конфигураций Webpack, так что нам не нужно писать свои собственные (так что мы можем немного дольше ездить на поезде с нулевой конфигурацией!)
  • html-webpack-plugin мы будем использовать это для создания файла HTML и внедрения в него наших ресурсов.
  • react-hot-loader позволяет изменять наши компоненты React и видеть изменения в реальном времени.
  • webpack-dev-server - это веб-сервер, похожий на http-server, но он также поддерживает HMR.

Начнем с добавления react-hot-loader в Babel в качестве плагина. Обновите .babelrc следующим образом (добавьте ключ / значение plugins);

{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["react-hot-loader/babel"]
}

Тогда давайте обновим наше приложение, чтобы использовать HMR. Откройте app.js и измените код следующим образом;

Мы используем hot функцию высшего порядка для включения HMR.

Теперь мы попали в ловушку. У нас больше нет возможности контролировать наш HTML-файл. Фактически, тот, который у нас есть в корневой папке, больше не будет использоваться. Поскольку мы используем HMR, нам потребуется внедрить наши скрипты во время выполнения, что и будет задачей html-webpack-plugin.

Откройте index.js и обновите код следующим образом;

Обратите внимание, что мы больше не нацелены на div с идентификатором root. Вместо этого мы нацелены на body. Это связано с тем, что, насколько мне известно, при использовании этого подхода с нулевой конфигурацией невозможно внедрить контейнер div во время сборки (пожалуйста, исправьте меня в комментариях ниже, если я ошибаюсь!).

React немного пожалуется в консоли браузера, но все по-прежнему будет работать. Мы устраним эту проблему в следующем посте (Спойлер: вам нужен файл конфигурации).

Наконец, мы должны обновить наши сценарии NPM, чтобы они использовали webpack-dev-server. Откройте package.json и добавьте следующий скрипт (оставьте исходный на месте):

"start:hmr": "webpack-dev-server --hot --mode=development --module-bind js=babel-loader --port=5589 --plugin common-config-webpack-plugin --plugin html-webpack-plugin"

Здесь много чего происходит, но это должно быть достаточно очевидным;

  • Запустите Webpack Dev Server на порту 5589 в режиме разработки и включите HMR.
  • Используйте Babel
  • Используйте common-config-webpack-plugin и html-webpack-plugin, как уже обсуждалось

Теперь все детали должны быть на своих местах. Если вы запустите npm run start:hmr и откроете в браузере http://localhost:5589, вы увидите, что ваше приложение запущено. Направляйтесь к counter.js, внесите изменения, и вы должны сразу увидеть изменение на экране.

Добавление поддержки SCSS и изображений

Поскольку мы используем common-config-webpack-plugin, у нас уже есть поддержка файлов SCSS и модулей SCSS, а также образов, поэтому дальнейшая настройка не требуется.

Чтобы использовать модули SCSS для нашего Counter компонента, просто создайте новый файл с именем counter.module.scss и добавьте стиль;

.button {
background-color: yellow;
}

И импортируйте файл прямо в counter.js следующим образом;

import styles from "./counter.module.scss";

Мы назвали наш стиль .button, поэтому мы ссылаемся на него с помощью styles.button.

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

Для изображений процесс такой же.

Создайте новую папку в src под названием img и добавьте туда изображение.

Теперь перейдите к app.js и импортируйте изображение;

import img from "./img/jonpreece-square.png";

Затем вы можете использовать изображение, установив src тега img следующим образом;

Вот наше готовое приложение;

Код этого проекта можно найти на GitHub.

Резюме

Вам, вероятно, понадобится набор инструментов для сборки, потому что вы, вероятно, захотите поддерживать новейшие языковые функции, устаревшие браузеры, иметь эффективный веб-сайт и сокращать время разработки с помощью таких инструментов, как Hot Module Reloading (HMR). Webpack - лучший выбор прямо сейчас для быстрого начала работы. Для более сложных сборок потребуется файл конфигурации, которым может быть сложно управлять.

Связаться

Вам понравилась эта история или вы хотите обсудить ее дальше со мной? Почему бы не отправить мне сообщение в Twitter!



Джон Прис (@jpreecedev) | Twitter
Последние твиты Джона Приса (@jpreecedev). Контракт веб-разработчика, дизайнера и разработчика программного обеспечения. Уоррингтон… twitter.com



Или загляните в мой личный блог



DeveloperHandbook.com - Более чистый код, лучший код.
Здесь, чтобы помочь вам написать более чистый код, лучший код с помощью всеобъемлющих и интересных руководств developerhandbook.com



Спасибо!