Создание веб-приложения с использованием 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 в терминале. Следующие пакеты будут установлены в качестве зависимостей разработки, так как пакеты не будут использоваться во время выполнения.

  1. @babel/core - это движок, который подберет всю конфигурацию, предоставленную для запуска плагинов, для преобразования последней версии JavaScript через преобразователи синтаксиса в простые ванильные версии, поддерживаемые целевой платформой. Обратите внимание, что это использует@babel/, что означает, что это пакет области видимости².
  2. @babel/preset-env - Этот пакет области видимости представляет собой предустановку Babel, которая компилирует код до ES5, автоматически определяя плагины и полифиллы Babel, необходимые в зависимости от целевого браузера или среды выполнения. По умолчанию он ведет себя точно так же, как babel-preset-latest (или babel-preset-es2015, babel-preset-es2016 и babel-preset-es2017 вместе) ³.
  3. babel-loader - это плагин Babel для Webpack, он будет добавлен в конфигурацию Webpack, чтобы указать ему запускать целевые файлы через Babel во время процесса сборки. Обратите внимание, что он не использует пакеты области видимости.
  4. html-webpack-plugin - это плагин Webpack, который упрощает создание файлов HTML для обслуживания пакетов Webpack. Это особенно полезно для пакетов веб-пакетов, которые включают в себя хэш в имени файла, который изменяет каждую компиляцию. Вы можете позволить плагину сгенерировать для вас HTML-файл, предоставить свой собственный шаблон, используя шаблоны lodash, или использовать свой собственный загрузчик.
  5. script-ext-html-webpack-plugin - Это плагин Webpack, который также не требуется при минимальной настройке. Но он позволяет автоматизировать внедрение связанного javascript в файлы HTML, включенные в дистрибутив.

Шаг 4
На этом шаге устанавливается пакет, позволяющий записать файл конфигурации Webpack с использованием ES6. Запускаем npm install --save-dev @babel/register в терминале. Следующие пакеты будут установлены в качестве зависимостей разработки, так как пакеты не будут использоваться во время выполнения.

  1. @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/