Создание веб-приложения с использованием ES6 как для кода, так и для конфигурации с использованием Webpack 4 и Babel 7 для объединения
Предыстория: использование Webpack с Babel для объединения веб-приложения ES6 - это хорошо документированная область с частями вспомогательного контента в различных источниках, таких как StackOverflow и Git, которые предоставляют информацию о том, как использовать ES6 для файла конфигурации Webpack. Но Babel начал использовать пакеты области видимости, начиная с версии 7. Поскольку для Babel 6 было написано много документации, но не для Babel 7. Это вызвало изрядную путаницу у многих разработчиков (включая автора). Поскольку многие пакеты OpenSource обычно заняты собственным репозиторием, чтобы иметь возможность оказывать полную поддержку или обновлять документацию. В этой статье мы надеемся восполнить этот пробел, пока все пакеты не перейдут на более высокую ступень.
Предварительные требования: в этой статье предполагается, что читатель понимает, как выбрать использование Webpack, Babel и ES6 для веб-приложений. Также предполагается базовое понимание того, как использовать Webpack, Babel и ES6.
В этой статье используется демонстрационное веб-приложение, которое ничего не делает, кроме простого javascript для записи в DOM браузера. В нем не рассматриваются детали настройки различных подключаемых модулей Webpack или подключаемых модулей Babel для сложных приложений, таких как SPA. Исходный код приложения можно найти по адресу https://github.com/seetdev-opensource/es6-webpack4-babel7.
В следующих разделах подробно описаны действия, выполненные для создания этого приложения. Приложение начинается со следующего дерева:
. ├── LICENSE - MIT License file for the repository ├── README.md - File describing the repository ├── package.json - Configuration file for npm package └── src - Folder containing all the application files ├── Controller.js ├── index.js └── index.template.html
Шаг 1
В корневой папке приложения запускаем следующую команду npm install --save-dev webpack webpack-cli
. Это установит webpack
, который содержит код для операций объединения, и webpack-cli
, который обеспечивает доступ к командной строке для Webpack. Мы передали параметр --save-dev
, чтобы указать, что мы хотим npm
сохранить эти пакеты как зависимость разработки в package.json
Шаг 2
Затем, поскольку пакеты Webpack не установлены в глобальном node_module
, требуется простая модификация для package.json
, которая позволит запускать локально установленный webpack-cli
. При этом используется npx
пакет, доступный только начиная с npm
версии 5.2.0. npx
позволяет нам запускать задачу npm run build
, которая выполняет Webpack после добавления нового свойства “build”: “webpack”
к свойству сценариев в package.json
. Для версии npm ‹5.2.0 см. Сноски ¹.
Шаг 3
На этом шаге устанавливаются минимальные пакеты, необходимые Babel 7 для работы с Webpack для веб-приложения. В случае, если версии ›то в статье вводятся критические изменения, эта статья будет обновляться по мере возможности. Сначала запустите npm install --save-dev babel-loader @babel/core @babel/preset-env html-webpack-plugin script-ext-html-webpack-plugin
в терминале. Следующие пакеты будут установлены в качестве зависимостей разработки, так как пакеты не будут использоваться во время выполнения.
@babel/core
- это движок, который подберет всю конфигурацию, предоставленную для запуска плагинов, для преобразования последней версии JavaScript через преобразователи синтаксиса в простые ванильные версии, поддерживаемые целевой платформой. Обратите внимание, что это использует@babel/
, что означает, что это пакет области видимости².@babel/preset-env
- Этот пакет области видимости представляет собой предустановку Babel, которая компилирует код до ES5, автоматически определяя плагины и полифиллы Babel, необходимые в зависимости от целевого браузера или среды выполнения. По умолчанию он ведет себя точно так же, как babel-preset-latest (или babel-preset-es2015, babel-preset-es2016 и babel-preset-es2017 вместе) ³.babel-loader
- это плагин Babel для Webpack, он будет добавлен в конфигурацию Webpack, чтобы указать ему запускать целевые файлы через Babel во время процесса сборки. Обратите внимание, что он не использует пакеты области видимости.html-webpack-plugin
- это плагин Webpack, который упрощает создание файлов HTML для обслуживания пакетов Webpack. Это особенно полезно для пакетов веб-пакетов, которые включают в себя хэш в имени файла, который изменяет каждую компиляцию. Вы можете позволить плагину сгенерировать для вас HTML-файл, предоставить свой собственный шаблон, используя шаблоны lodash, или использовать свой собственный загрузчик.script-ext-html-webpack-plugin
- Это плагин Webpack, который также не требуется при минимальной настройке. Но он позволяет автоматизировать внедрение связанного javascript в файлы HTML, включенные в дистрибутив.
Шаг 4
На этом шаге устанавливается пакет, позволяющий записать файл конфигурации Webpack с использованием ES6. Запускаем npm install --save-dev @babel/register
в терминале. Следующие пакеты будут установлены в качестве зависимостей разработки, так как пакеты не будут использоваться во время выполнения.
@babel/register
- Этот пакет области видимости предоставляет ловушку require, которая привязывается кrequire
узла и автоматически компилирует файлы для Babel на лету. Webpack используетjs-interpret
⁵ внутри, чтобы вызвать регистрацию пакета как модуля для преобразования файла конфигурации Webpack для выполнения. Для работы требуется, чтобы файл был назван суффиксом.babel.js
.
Шаг 5
На последнем шаге создается файл конфигурации Webpack webpack.config.babel.js
, используемый для настройки Webpack. Полная информация о файле конфигурации здесь не рассматривается⁶. Но вкратце он получает предоставленный входной файл javascript и обрабатывает его через модули. Он использует плагины, чтобы убедиться, что HTML также обрабатывается. Важно отметить, что имя файла имеет префикс webpack.config
, который является частью имени файла по умолчанию, используемого Webpack. Он также использует суффикс babel.js
, который используется js-interpret
для обозначения файлов конфигурации, которые необходимо передать Babel.
import path from 'path'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin'; export default { entry: path.join(__dirname, 'src/index.js'), output: { path: path.join(__dirname, 'dist'), filename: '[name].bundle.js' }, module: { rules: [{ test: /\.js/, exclude: /(node_modules|bower_components)/, use: [{ loader: 'babel-loader' }] }] }, plugins: [ new HtmlWebpackPlugin({ title: 'Custom template', template: path.join(__dirname, 'src/index.template.html') }), new ScriptExtHtmlWebpackPlugin({ defaultAttribute: 'defer' }) ], stats: { colors: true }, devtool: 'source-map' };
Шаг 6
На последнем шаге создается файл конфигурации для Babel .babelrc
⁶. Это имя файла по умолчанию, используемое Babel для определения конфигурации во время процесса транспиляции Babel.
{ "presets": ["@babel/preset-env"] }
Последний шаг
После завершения настройки это будет последнее дерево каталогов проекта. (node_modules
был проигнорирован, чтобы сохранить лаконичность)
. ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src │ ├── Controller.js │ ├── index.js │ └── index.template.html └── webpack.config.babel.js
Команду npm run build
можно запустить в корневой папке, которая создаст связанный файл Javascript и сгенерирует файл html в папке dist, подробно описанной в конфигурации.
Заключение
В этой статье представлена простая реализация того, как настроить Webpack для использования Babel 7 как для настройки самого Webpack, так и для объединения кода с использованием ES6. Он не охватывает все варианты использования Webpack или Babel в надежде, что он дает базовое понимание этих инструментов, которое может быть расширено читателем. Используемый сопутствующий код можно найти по адресу https://github.com/seetdev-opensource/es6-webpack4-babel7. А ниже показан список зависимостей и их версий, которые были протестированы для этой статьи.
"devDependencies": { "@babel/core": "7.2.2", "@babel/preset-env": "7.3.1", "@babel/register": "7.0.0", "babel-loader": "8.0.5", "html-webpack-plugin": "3.2.0", "script-ext-html-webpack-plugin": "2.1.3", "webpack": "4.29.3", "webpack-cli": "3.2.3" }
Мы будем приветствовать предложения или исправления к статье, чтобы сделать ее более полезной для всех. Но автор не занимается этим постоянно, поэтому для ответа может потребоваться время.
- ¹ Для версии npm ‹5.2.0 существует выбор: установить Webpack глобально, использовать полный путь в
node_modules
к двоичному файлу установленного Webpack или просмотреть ссылки, представленные в https://github.com/npm/npm/ Release / tag / v5.2.0 для запускаnpx
в командной строке. - ² Области действия - это способ группировки связанных пакетов вместе, а также некоторые аспекты того, как npm обрабатывает пакет https://docs.npmjs.com/misc/scope
- ³ Babel не рекомендует использовать
preset-env
с настройками по умолчанию, потому что он не использует более широкие возможности таргетинга на определенные браузеры. Но это тема, выходящая за рамки данной статьи, и вы можете обратиться к https://babeljs.io/docs/plugins/preset-env/ для получения дополнительной информации. - ⁴ js-интерпретировать пакет, используемый Webpack, чтобы автоматически запрашивать зависимости для файлов конфигурации https://github.com/js-cli/js-interpret
- ⁵ Полную информацию о том, как работает файл конфигурации Webpack, можно найти в документации https://webpack.js.org/configuration/