Плагины

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

Использование плагина​

Если плагин находится на npm, вы можете указать имя плагина, и Babel проверит, что он установлен в node_modules. Это добавляется в опцию конфигурации plugins, которая принимает массив.

{
  "plugins": ["babel-plugin-myPlugin", "@babel/plugin-transform-runtime"]
}

Вы также можете указать относительный или абсолютный путь к вашему плагину.

{
  "plugins": ["./node_modules/asdf/plugin"]
}

См. нормализацию имён для получения более подробной информации о конфигурации пути к плагину или пресету.

Плагины преобразования​

Эти плагины применяют преобразования к вашему коду.

Синтаксические плагины​

Большинство синтаксических конструкций могут быть преобразованы Babel. В редких случаях (если преобразование ещё не реализовано или нет стандартного способа сделать это), вы можете использовать плагины, такие как @babel/plugin-syntax-bigint для того, чтобы разрешить Babel **парсить** только определённые типы синтаксиса. Или вы хотите сохранить исходный код, потому что вам нужен только анализ кода или рефакторинг Babel.

ПРИМЕЧАНИЕ: Вам не нужно указывать синтаксический плагин, если уже используется соответствующий плагин преобразования, так как он автоматически его активирует.

В качестве альтернативы, вы также можете предоставить любые plugins опцию из парсера Babel:

Ваш .babelrc:

{
  "parserOpts": {
    "plugins": ["jsx", "flow"]
  }
}

Порядок плагинов​

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

Это означает, что если два преобразования посещают узел «Программа», преобразования будут выполняться в порядке плагина или пресета.

• Плагины выполняются до пресетов.
• Порядок плагинов — от первого к последнему.
• Порядок пресетов — от последнего к первому (обратный).

Например:

{
  "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

Будет выполняться transform-decorators-legacy, затем transform-class-properties.

Важно помнить, что с пресетами порядок обратный. Следующее:

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

Будет выполняться в следующем порядке: @babel/preset-react, затем @babel/preset-env.

Опции плагинов​

И плагины, и пресеты могут иметь заданные параметры, обернув имя и объект параметров в массив внутри вашей конфигурации.

Для задания отсутствия параметров все эти варианты эквивалентны:

{
  "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}

Чтобы задать параметр, передайте объект с именами параметров в качестве ключей.

{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        "module": "bluebird",
        "method": "coroutine"
      }
    ]
  ]
}

Параметры настройки пресетов работают точно так же:

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

Разработка плагинов​

Обратитесь к отличной документации babel-handbook, чтобы узнать, как создавать собственные плагины.

Простой плагин, который переворачивает имена (из домашней страницы):

export default function() {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name;
        // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name
          .split("")
          .reverse()
          .join("");
      },
    },
  };
}