Расскажите об общей конфигурации Babel и babel-preset-env.

Webpack Babel
Расскажите об общей конфигурации Babel и babel-preset-env.

1. Что такое Вавилон

«Компилятор для написания JavaScript следующего поколения»
Простой перевод — «Компилятор для написания JavaScript следующего поколения». Со временем JavaScript также медленно развивается, появляются новые функции и синтаксис, но у каждого производителя браузеров нет полной поддержки, поэтому есть инструмент, транслирующий новые функции и синтаксис в браузер для распознавания стандартной грамматики, появился Babel, это этот инструмент, ES6/ES7/ES8 => Babel => ES5.
babel-compilebabel-compile

2.Babel preset & plugin & stage-x

Preset и stage-x являются категориями плагинов, но их охват различен. Если вы хотите использовать синтаксис ES2015 (ES6), вот различные способы импорта плагина и пресета.

(1)plugin

// .babelrc
{
plugins: [
    'transform-class-properties',
    'es2015-arrow-functions',
    'transform-decorators-legacy'
    ]
}

(2)preset

Для удобства внедрения команда Babel интегрировала многие плагины преобразования ES2015 в babel-preset-es2015, поэтому вам необходимо ввести es2015, что значительно снижает стоимость внедрения.

// .babelrc
{
  "presets": [ "es2015" ]
}

(3)stage-x

stage-x представляет четыре этапа перед тем, как этап-0, этап-1, этап-2 и этап-3 войдут в стандарт EMAC.

(4) Плагин и заданный порядок работы

  • плагин запустится перед пресетом
  • плагины будут выполняться последовательно, начиная с первого
  • Порядок пресетов прямо противоположный (выполнять с последнего обратного порядка)

3.babel-preset-es2015/es2016/es2017

(1)es2015(ES6)

4.babel-preset-stage-x

Для изменения языка требуется процесс разработки, этап-x содержит рекомендации по превращению идеи в полную спецификацию, этап-0 содержит этапы-1/2/3, этап-1 содержит этапы-2/3, этап-2 содержит этапы. -3,TC39Рабочий процесс:Переключение между заданиями 39.GitHub.IO/process-doc…
TC39 ProcessTC39 Process

(1)stage-0

  • transform-do-expressions
  • transform-function-bind
    В дополнение к вышеперечисленным плагинам он также включает плагины stage-1, stage-2, stage-3.

    (2)stage-1

  • transform-class-constructor-call (Deprecated)
  • transform-export-extensions
    В дополнение к вышеперечисленным плагинам, он также включает в себя плагины stage-2, stage-3.

    (3)stage-2

  • syntax-dynamic-import
  • transform-class-properties
  • transform-decorators disabled pending proposal update (can use the legacy transform in the meantime)
    Помимо вышеперечисленных плагинов, есть еще плагины для stage-3

    (4)stage-3

  • transform-object-rest-spread
  • transform-async-generator-functions

5.babel-polyfill

При компиляции Babel компилирует только синтаксис и не компилирует API-интерфейсы, несовместимые со спецификацией, такие как: async, Set, Symbol, Promise и т. д. babel-polyfill смонтирует все эти API-интерфейсы, недоступные для глобального предмет, который представляет собой так называемую «площадку».

(1) Преимущества

Если в вашем коде много отсылок к вышеуказанным API, внедрение babel-polyfill будет сделано раз и навсегда

(2) Недостатки

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

  • Если вы хотите использовать babel-polyfill, вам необходимо импортировать другой код или модули до того, как на них будет сделана ссылка, в верхней части записи JS (в настоящее время в большинстве случаев используется в Node):
// ES5
require("babel-polyfill");
// ES6
import "babel-polyfill";

6. Babel-tuntime и babel-plugin-transform-runtime

(1)babel-runtime

Babel-runtime немного похож на babel-polyfill, оба являются «прокладками» для совместимости с новым API.Самая большая разница между ним и babel-polyfill заключается в том, что на него можно ссылаться по запросу, а то, что необходимо, можно используется везде, например, мне нужен Promise. Как правило, в производственной среде сначала устанавливаются зависимости, а затем импортируются:

npm install --save babel-runtime
import Promise from 'babel-runtime/core-js/promise';

(2)babel-plugin-transform-runtime

​ Вопрос в том, если я использую Babel-runtime, если я хочу сослаться на Promise в 10 файлах, нужно ли мне писать Promise of babel-runtime для импорта каждого файла, что, очевидно, очень хлопотно. Затем для решения этой проблемы используется babel-plugin-transform-runtime.Независимо от того, сколько файлов вы вводите связанных новых API, будет только одна копия.babel-plugin-transform-runtime по существу зависит от core-js babel-runtime, он автоматически обработает это для вас при компиляции и установит зависимости в среде разработки:

npm install --save-dev babel-plugin-transform-runtime

Вам просто нужно настроить .babelrc:

// .babelrc
{
  "plugins": [
    "transform-runtime"
  ]
}

7.babel-preset-env

Я полагаю, что те, кто не обновил babel-preset-env, столкнутся со следующими подсказками при установке babel-preset-es2015/es2016/es2017.
babel-preset-envbabel-preset-env
​ babel-preset-env автоматически определит плагины и полифилы babel на основе вашего браузера и операционной среды, а также скомпилирует языки ES2015 и выше. то же самое (или, можно сказать, в сочетании с babel-preset-es2015, babel-preset-es2016 и babel-preset-es2017, и производительность одинакова).Детальная конфигурация babel-preset-env

npm install babel-preset-env --save-dev

(1) Не используйте babel-preset-env

{
  "presets": ["react", "es2015", "stage-1"],
  "plugins": [
    "transform-remove-strict-mode",
    "transform-class-properties",
    "transform-flow-strip-types",
  ]
}

(2) Используйте babel-preset-env

Вам больше не нужно импортировать соответствующий плагин в соответствии с совместимым синтаксисом и API, babel-preset-env поможет вам автоматически импортировать зависимые плагины в соответствии с вашей соответствующей конфигурацией.

{
  "presets": ["react", "env", "stage-1"]
}

8. webpack настроить babel-preset-env

Конфигурация webpack совместима с chrome версии 44 и выше, например IE 9 и выше, конфигурация следующая:

  • файл webpack.config.js
// webpack v3.x module配置  
module: {
    rules: [{
      test: /\.html$/,
      loader: 'html-loader?minimize=false'
    }, {
      test: /\.json$/,
      loader: 'json-loader'
    }, {
      test: /\.(?:jpg|gif|png)$/,
      loader: 'url-loader?limit=10240&name=../images/[name]-[hash:10].[ext]'
    }, {
      test: /\.js$|\.jsx$/,
      exclude: /(node_modules|bower_components)/,
      use: [{
          loader: 'babel-loader'
      }]
    }]
}
  • файл .babelrc
    {
  "presets": [
    [
      "env", {
        "targets": {
          "browsers": [
            "last 2 versions",
            "chrome >= 44",
            "ie >= 9"
          ]
        }
      }
    ],
    "react",
    "stage-1"
  ]
}
Категории