跳至主内容

插件

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

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 执行代码分析或 codemods 操作时。

提示

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

此外，你也可以直接提供 Babel 解析器中的任何 plugins 选项：

你的 .babelrc 文件：

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

插件排序规则​

插件中每个访问器(visitor)的顺序至关重要。

这意味着当两个转换都访问 "Program" 节点时，转换将按照插件或预设的排列顺序执行。

  • 插件在预设之前执行

  • 插件顺序为从前到后

  • 预设顺序为从后到前（反向）

例如：

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("");
      },
    },
  };
}