插件

Babel 的代码转换是通过将插件（或预设 (opens new window) ）应用到您的配置文件 (opens new window) 来启用的。

使用插件 (opens new window)

如果插件在npm (opens new window) 上，你可以传入插件的名称，Babel 会检查它是否安装在node_modules. 这被添加到插件 (opens new window) 配置选项，它接受一个数组。

babel.config.json

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

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

babel.config.json

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

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

转换插件​ (opens new window)

这些插件用于转换你的代码。

信息 转换插件将启用相应的语法插件，因此你不必同时指定这两种插件。

语法插件​ (opens new window)

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

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

或者，你也可以通过 Babel 解析器传递任何 plugins 参数 ：

你的.babelrc：

JSON

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

插件顺序​ (opens new window)

插件的排列顺序很重要。

这意味着如果两个转换插件都将处理“程序（Program）”的某个代码片段，则将根据转换插件或 preset 的排列顺序依次执行。

• 插件在 Presets 前运行。
• 插件顺序从前往后排列。
• Preset 顺序是颠倒的（从后往前）。

例如：

babel.config.json

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

先执行 transform-decorators-legacy，在执行 transform-class-properties。

重要的时，preset 的顺序是 颠倒的。如下设置：

babel.config.json

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

将按如下顺序执行： 首先是 @babel/preset-react，然后是 @babel/preset-env。

插件参数​ (opens new window)

插件和 preset 都可以接受参数，参数由插件名和参数对象组成一个数组，可以在配置文件中设置。

如果不指定参数，下面这几种形式都是一样的：

babel.config.json

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

要指定参数，请传递一个以参数名作为键（key）的对象。

babel.config.json

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

preset 的设置参数的工作原理完全相同：

babel.config.json

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

插件开发​ (opens new window)

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