Skip to main content

插件

Babel 的代码转换是通过向你的 配置文件 应用插件（或 预设）来实现的。

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

使用插件​

🌐 Using a Plugin

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

🌐 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.

info

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

语法插件​

🌐 Syntax Plugins

大部分语法都可以通过 Babel 转换。在一些比较少见的情况下（比如转换还没实现，或者没有默认的做法），你可以使用像 @babel/plugin-syntax-bigint 这样的插件，只让 Babel 解析 特定类型的语法。或者你想保留源码，因为你只希望 Babel 做代码分析或代码修改。

🌐 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.

tip

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

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

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

你的 .babelrc：

🌐 Your .babelrc:

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

插件排序​

🌐 Plugin Ordering

在插件中，每个访问者的顺序很重要。

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

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

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

例如：

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