Skip to main content

插件

通过将插件（或 presets）应用到你的 配置文件 来启用 Babel 的代码转换。

¥Babel's code transformations are enabled by applying plugins (or presets) to your configuration file.

使用插件​

¥Using a Plugin

如果插件在 npm 上，你可以传入插件的名称，Babel 会检查它是否安装在 node_modules 上。这被添加到 插件 配置选项中，该选项需要一个数组。

¥If the plugin is on npm, you can pass in the name of the plugin and Babel will check that it's installed in node_modules. This is added to the plugins config option, which takes an array.

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

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

¥You can also specify a relative/absolute path to your plugin.

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

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

¥See name normalization for more specifics on configuring the path of a plugin or preset.

转换插件​

¥Transform Plugins

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

¥These plugins apply transformations to your code.

信息

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

¥Transform plugins will enable the corresponding syntax plugin so you don't have to specify both.

语法插件​

¥Syntax Plugins

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

¥Most syntax is transformable by Babel. In rarer cases (if the transform isn't implemented yet, or there isn't a default way to do so), you can use plugins such as @babel/plugin-syntax-bigint to only allow Babel to parse specific types of syntax. Or you want to preserve the source code because you only want Babel to do code analysis or codemods.

提示

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

¥You don't need to specify the syntax plugin if the corresponding transform plugin is used already, since it enables it automatically.

或者，你也可以提供来自 Babel 解析器的任何 plugins 选项：

¥Alternatively, you can also provide any plugins option from the Babel parser:

你的 .babelrc：

¥Your .babelrc:

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

插件排序​

¥Plugin Ordering

插件中每个访问者的顺序事宜。

¥Ordering matters for each visitor in the plugin.

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

¥This means if two transforms both visit the "Program" node, the transforms will run in either plugin or preset order.

  • 插件在预设之前运行。

    ¥Plugins run before Presets.

  • 插件排序是从前到后的。

    ¥Plugin ordering is first to last.

  • 预设顺序是相反的（最后到第一个）。

    ¥Preset ordering is reversed (last to first).

例如：

¥For example:

babel.config.json
{
  "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

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

¥Will run transform-decorators-legacy then transform-class-properties.

重要的是要记住，使用预设，顺序是相反的。以下：

¥It is important to remember that with presets, the order is reversed. The following:

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

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

¥Will run in the following order: @babel/preset-react then @babel/preset-env.

插件选项​

¥Plugin Options

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

¥Both plugins and presets can have options specified by wrapping the name and an options object in an array inside your config.

对于不指定选项，这些都是等效的：

¥For specifying no options, these are all equivalent:

babel.config.json
{
  "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}

要指定选项，请将带有键的对象作为选项名称传递。

¥To specify an option, pass an object with the keys as the option names.

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

预设的设置选项完全相同：

¥Settings options for presets works exactly the same:

babel.config.json
{
  "presets": [
    [
      "env",
      {
        "loose": true,
        "modules": false
      }
    ]
  ]
}

插件开发​

¥Plugin Development

请参考优秀的 babel-handbook 来学习如何创建自己的插件。

¥Please refer to the excellent babel-handbook to learn how to create your own plugins.

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

¥The simple plugin that reverses names (from the homepage):

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