插件

Babel 的代码转换通过将插件（或 预设）应用于您的 配置文件 来启用。

使用插件

如果插件位于 npm 上，您可以传入插件的名称，Babel 将检查它是否已安装在 node_modules 中。这将添加到 plugins 配置选项中，该选项接受一个数组。

babel.config.json

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

您还可以指定插件的相对/绝对路径。

babel.config.json

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

有关配置插件或预设路径的更多细节，请参阅 名称规范化。

转换插件

这些插件将转换应用于您的代码。

信息

转换插件将启用相应的语法插件，因此您无需同时指定两者。

语法插件

大多数语法都可以通过 Babel 进行转换。在极少数情况下（如果转换尚未实现，或者没有默认的方法来实现），您可以使用诸如 @babel/plugin-syntax-bigint 之类的插件来仅允许 Babel 解析 特定类型的语法。或者，您希望保留源代码，因为您只想让 Babel 进行代码分析或代码修改。

提示

如果已经使用了相应的转换插件，则无需指定语法插件，因为它会自动启用它。

或者，您也可以提供 Babel 解析器的任何 plugins 选项

您的 .babelrc

JSON

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

插件排序

排序对于插件中的每个访问者都很重要。

这意味着如果两个转换都访问“程序”节点，则转换将按插件或预设顺序运行。

• 插件在预设之前运行。
• 插件排序是从第一个到最后一个。
• 预设排序是相反的（从最后一个到第一个）。

例如

babel.config.json

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

将先运行 transform-decorators-legacy，然后运行 transform-class-properties。

重要的是要记住，对于预设，顺序是相反的。以下

babel.config.json

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

将按以下顺序运行：@babel/preset-react，然后是 @babel/preset-env。

插件选项

插件和预设都可以通过在配置中的数组中包装名称和选项对象来指定选项。

对于不指定选项，以下所有内容都是等效的

babel.config.json

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

要指定选项，请传递一个对象，其中键作为选项名称。

babel.config.json

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

预设的设置选项的工作原理完全相同

babel.config.json

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

插件开发

请参阅优秀的 babel-handbook 以了解如何创建自己的插件。

反转名称的简单插件（来自主页）

JavaScript

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