Babel: разница и использование плагина и пресета

Babel
Babel: разница и использование плагина и пресета

Обзор статьи

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

Все примеры в этой статье доступны по адресуАвтор гитхабнайти на.

Введение в плагин Babel

Babel — это конвертер кода, например, для преобразования ES6 в ES5 или преобразования JSX в JS и т. д. С помощью Babel разработчики могут заранее использовать новые функции JS, что значительно помогает повысить производительность.

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

Исходный код --> [Плагин Babel] --> Преобразованный код

Пример плагина Babel

Исходный код выглядит следующим образом: здесь используются две новые функции, поддерживаемые только ES6: стрелочные функции for...of. В браузерах, поддерживающих только ES5, эти два фрагмента кода сообщат об ошибке.

Поэтому код можно преобразовать в ES5 с помощью плагинов.

// index.js
// 箭头函数
[1,2,3].map(n => n + 1);

// 模板字面量
let nick = '程序猿小卡';
let desc = `hello ${nick}`;

Установите зависимости:

npm install --save-dev babel-cli 
npm install --save-dev babel-plugin-transform-es2015-arrow-functions
npm install --save-dev babel-plugin-babel-plugin-transform-es2015-template-literals

выполнить преобразование через--pluginsОбъявить зависимые плагины, которые используются между несколькими плагинами,разделять.

`npm bin`/babel --plugins babel-plugin-transform-es2015-arrow-functions,babel-plugin-transform-es2015-template-literals index.js

Результат преобразования следующий:

[1, 2, 3].map(function (n) {
  return n + 1;
});

let nick = '程序猿小卡';
let desc = 'hello ' + nick;

В команде преобразования имя плагина можно не указыватьbabel-pluginПриставка:

`npm bin`/babel --plugins transform-es2015-arrow-functions,transform-es2015-template-literals index.js

Его также можно изменить на файл конфигурации .babelrc,pluginsПлагины, объявленные в полях, выполняются по порядку.

{
  "plugins": [
    "transform-es2015-arrow-functions",
    "transform-es2015-template-literals"
  ]
}

Выполните команду преобразования еще раз:

`npm bin`/babel

Введение в пресет Babel

Плагины Babel, как правило, разбиваются на как можно более мелкие части, и разработчики могут вводить их по мере необходимости. Например, для функции от ES6 до ES5 Babel официально разобрал ее на 20+ плагинов.

Преимущества этого очевидны, улучшая как производительность, так и масштабируемость. Например, если разработчик хочет испытать функции стрелок ES6, ему нужно только представитьtransform-es2015-arrow-functionsПодойдут плагины вместо загрузки корзин семейства ES6.

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

В это время можно использовать Babel Preset.

Вы можете просто думать о Babel Preset как о наборе плагинов Babel. Напримерbabel-preset-es2015Он содержит все плагины, связанные с преобразованиями ES6.

Ниже приведен пример.

Пример предустановки Babel

Все еще исходный код, на этот раз с использованиемbabel-preset-es2015для преобразования.

Сначала установите зависимости:

npm install --save-dev babel-cli 
npm install --save-dev babel-preset-es2015

выполнить преобразование через--presetsОбъявить зависимые пресеты, используемые между несколькими пресетами,делай разлуку.

`npm bin`/babel --presets babel-preset-es2015 index.js
`npm bin`/babel --presets es2015 index.js # 也可以去掉 babel-preset 前缀

Также можно использовать файл конфигурации .babelrc.

{
  "presets": [ "es2015" ]
}

Команда преобразования:

`npm bin`/babel

Порядок выполнения плагинов и пресетов

Одновременно можно использовать несколько плагинов и пресетов, в этом случае очень важен порядок их выполнения.

  1. Сначала запустите все плагины, а затем запустите Preset.
  2. Несколько плагинов выполняются в том порядке, в котором они объявлены.
  3. Несколько пресетов выполняются в обратном порядке в соответствии с порядком объявления.

Например.babelrcКонфигурация следующая, далее порядок выполнения такой:

  1. Плагин: transform-react-jsx, transform-async-to-generator
  2. Пресет: es2016, es2015
{
  "plugins": [ 
    "transform-react-jsx",
    "transform-async-to-generator"
  ],
  "presets": [ 
    "es2015",
    "es2016"    
  ]
}

Ниже приведен простой пример для иллюстрации.

Пример смешанного использования плагина и пресета

Пример: скомпилируйте index.jsx в index.js и примите спецификацию ES5. Здесь есть два шага:

  1. БудуjsxГрамматика вjsграмматика.
  2. Преобразование спецификаций ES6 в спецификации ES5.

Исходный код выглядит следующим образом:

// index.jsx
var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

var foo = () => "foo";

Установите зависимости:

npm install --save-dev babel-cli 
npm install --save-dev babel-plugin-transform-react-jsx 
npm install --save-dev babel-preset-es2015

Файл конфигурации .babelrc:

{
  "plugins": [ "transform-react-jsx" ],
  "presets": [ "es2015" ]
}

Выполните преобразование:

`npm bin`/babel index.jsx

Результат преобразования следующий:

"use strict";

var profile = React.createElement(
  "div",
  null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement(
    "h3",
    null,
    [user.firstName, user.lastName].join(' ')
  )
);

var foo = function foo() {
  return "foo";
};

Читатели могут попробовать следующие команды, которые используются отдельноbebel-preset-es2015При выполнении преобразования кода будет сообщено о синтаксической ошибке. Это может подтвердить со стороны, что порядок выполнения Плагина предшествует пресету.

`npm bin`/babel --presets es2015 index.jsx

Настройка пресетов Babel

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

В реальной разработке плагин/пресет, который нам нужно использовать, является относительно фиксированным.Если нам приходится каждый раз писать его повторно или копировать файл конфигурации babel, это громоздко и подвержено ошибкам. В настоящее время вы можете рассмотреть возможность настройки Babel Preset.

Взяв за пример предыдущую компиляцию index.jsjsx, мы использовали babel-preset-es2015, babel-plugin-transform-react-jsx, и мы можем создавать собственные пресеты и включать их: ()

// mypreset.js
module.exports = {
  presets: [
    require("babel-preset-es2015"),
  ],
  plugins: [    
    require("babel-plugin-transform-react-jsx"),
  ]
};

Затем измените .babelrc. Поскольку это локальный файл, используются все относительные пути.Если он опубликован в npm, имя пакета можно использовать напрямую.

{
  "presets": [
    "./mypreset.js"
  ]
}

Процесс транскодирования опущен, и читатели могут попробовать его самостоятельно.

Элементы конфигурации плагинов/пресетов

Как Babel Plugin, так и Babel Preset поддерживают элементы конфигурации, и синтаксис элемента конфигурации одинаков, как показано ниже (плагины аналогичны).

{
    "presets": [ 
        presetName01, // 没有配置
        [ presetName02, presetOptions02 ] // 有配置
    ]
}

Конкретные примеры следующие:

{
  "presets": [
    ["es2015", {
      "loose": true,
      "modules": false
    }]
  ]
}

Элементы конфигурации разных плагинов/пресетов могут иметь разные функции.Подробности см. в их официальных документах.

Ссылки по теме

Babel — это .IO/docs/plugin…

2018.05.31-babel-plugin-preset

Категории