ES6+ в старых браузерах

Mithril.js написан на ES5, но он полностью совместим с ES6 и более поздними версиями. Все современные браузеры поддерживают его изначально, вплоть до синтаксиса нативных модулей. (Они не поддерживают магическое разрешение модулей Node, поэтому вы не можете использовать import * as _ from "lodash-es" или что-то подобное. Они поддерживают только относительные и URL-пути.) Поэтому смело используйте стрелочные функции для ваших компонентов-замыканий и классы для ваших компонентов, написанных с использованием классов.

Но если вам все еще нужно поддерживать старые браузеры, такие как Internet Explorer, потребуется транспилировать код до ES5. На этой странице мы расскажем об использовании Babel для обеспечения работы современного кода ES6+ в старых браузерах.

Настройка

Прежде всего, убедитесь, что у вас установлен Node.js. Он включает в себя предустановленный npm, который потребуется далее.

После установки Node.js откройте терминал и выполните следующие команды:

# Замените это фактическим путем к вашему проекту. Заключите его в кавычки, если он содержит пробелы,
# а если вы используете Linux/Mac и путь содержит `$$`, используйте одинарные кавычки.
cd "/path/to/your/project"

# Если у вас уже есть `package.json`, пропустите эту команду.
npm init

Теперь вы можете выбрать один из нескольких способов:

• Использовать Babel автономно, без бандлера
• Использовать Babel и бандлить с помощью Webpack

Использование Babel автономно

Сначала необходимо установить несколько зависимостей.

• @babel/cli устанавливает основную логику Babel, а также команду babel.
• @babel/preset-env помогает Babel определить, что и как транспилировать, основываясь на целевых браузерах.

npm install @babel/cli @babel/preset-env --save-dev

Теперь создайте файл .babelrc (или babel.config.js) и настройте его с помощью @babel/preset-env.

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

И, наконец, если у вас есть особые требования к поддерживаемым браузерам, вы можете настроить Browserslist, чтобы Babel (и другие инструменты) знали, на какие функции ориентироваться.

По умолчанию, если вы ничего не настраиваете, Browserslist использует довольно разумный запрос: > 0.5%, last 2 versions, Firefox ESR, not dead. Если у вас нет очень специфических обстоятельств, требующих изменения этого, например, если вам нужно поддерживать IE 8 с большим количеством полифилов, не беспокойтесь об этом шаге.

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

babel src --out-dir dist

Чтобы не запоминать и не вводить команду каждый раз, удобно создать npm-скрипт. Добавьте поле "build" в объект "scripts" в вашем package.json:

{
  "scripts": {
    "build": "babel src --out-dir dist"
  }
}

Теперь эту команду легче запомнить и использовать.

npm run build

Использование Babel с Webpack

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

• webpack - это основной пакет Webpack, а webpack-cli предоставляет команду webpack.
• @babel/core - это ядро Babel, которое является peer-зависимостью для babel-loader.
• babel-loader позволяет настроить Webpack для использования Babel для транспиляции файлов.
• @babel/preset-env помогает Babel определить, что и как транспилировать.

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

Теперь создайте файл .babelrc (или babel.config.js) и настройте его с помощью @babel/preset-env.

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

Далее, если у вас есть особые требования к поддерживаемым браузерам, вы можете настроить Browserslist, чтобы Babel (и другие инструменты) знали, на какие функции ориентироваться.

По умолчанию, если вы ничего не настраиваете, Browserslist использует довольно разумный запрос: > 0.5%, last 2 versions, Firefox ESR, not dead. Если у вас нет очень специфических обстоятельств, требующих изменения этого, например, если вам нужно поддерживать IE 8 с большим количеством полифилов, не беспокойтесь об этом шаге.

И, наконец, настройте Webpack, создав файл с именем webpack.config.js.

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /\/node_modules\//,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

В этой конфигурации предполагается, что файл точки входа приложения находится в src/index.js, а собранный бандл будет помещен в dist/app.js.

Теперь, чтобы запустить сборку, просто выполните эту команду:

webpack -d --watch

Чтобы не запоминать и не вводить команду каждый раз, удобно создать npm-скрипт. Добавьте поле "start" в объект "scripts" в вашем package.json:

{
  "scripts": {
    "start": "webpack -d --watch"
  }
}

Теперь эту команду легче запомнить и использовать.

npm start

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

webpack -p

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

{
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p"
  }
}

Тогда эту команду будет легче запомнить.

npm run build

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

{
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p",
    "heroku-postbuild": "webpack -p"
  }
}