7.0.0

Edit

插件

Babel 是一个编译器（源代码=>输出代码）。像许多其他编译器一样，它分三个阶段运行：解析，转换和生成新代码。

现在，开箱即用的 Babel 没有做任何事情。通过解析代码，基本上像 const babel = code => code; ，然后再次生成相同的代码。所以做任何事你都需要添加 Babel 插架来实现。

可以在 preset 中启用一组插件，而不是单独的插件。

转换插件

这些插件将把转换应用到你的代码中。

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

ES3

ES5

ES2015

ES2016

ES2017

ES2018

模块

试验阶段

简化

查看 基于 Babel 的简化！

这些插件都在 minify repo 中。

React

其他

语法插件

这些插件允许 Babel parse 特定类型的语法（不是转换）。

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

或者，也可以从 Babel 解析器中的 plugins 选项提供。

你的 .babelrc:

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

插件/Preset 路径

如果插件是在 npm 上，可以写入插件的名称，babel 将检查它是否已安装在 node_modules 中。

{
  "plugins": ["babel-plugin-myPlugin"]
}

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

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

插件简写

如果包的名称以 babel-plugin- 为前缀，可以使用简写：

{
  "plugins": [
    "myPlugin",
    "babel-plugin-myPlugin" // 等同
  ]
}

也适用于范围包：

{
  "plugins": [
    "@org/babel-plugin-name",
    "@org/name" // 等同
  ]
}

插件顺序

指定插件每个访问者的事项

这意味着如果两个转换器都访问同一个“ Program ”节点，则转换器将以插件或 preset 顺序运行。

  • 插件在 Presets 前运行。
  • 插件可以指定从头到尾的顺序。
  • Preset 顺序是相反的 (从后到前).

例如:

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

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

关于 presets 一定要记住，顺序是相反的。如下：

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

按以下顺序运行：@babel/preset-react 再运行 @babel/preset-env。

插件选项

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

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

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

要指定选项，输入一个选项名作为 key 的对象。

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

presets 的选项设置相同:

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

插件开发

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

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

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