Skip to content
On this page

Babel 配置参考

预设

官方预设

  • @babel/preset-env 用于编译 ES2015+ 语法
  • @babel/preset-typescript 用于 TypeScript
  • @babel/preset-react 用于 React
  • @babel/preset-flow 用于 Flow

使用预设

在 Babel 配置中,如果预设在 npm 上,你可以传入预设的名称,Babel 将检查它是否已经安装在 node_modules 中。 这将添加到 预设 配置选项中,该选项接受一个数组。

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

除此以外,还可以指定预设的相对或绝对路径。

json
{
  "presets": ["./myProject/myPreset"]
}
{
  "presets": ["./myProject/myPreset"]
}

创建预设

要制作你自己的预设,需要导出一个配置对象,需要返回一个插件数组

预设可以包含其它预设和带有选项的插件。

js
module.exports = function () {
  return {
    plugins: ["Plugin-A", "Plugin-B", "Plugin-C"],
  };
};
module.exports = function () {
  return {
    plugins: ["Plugin-A", "Plugin-B", "Plugin-C"],
  };
};

预设排序

js
plugins: ["Plugin-A", "Plugin-B", "Plugin-C"],
plugins: ["Plugin-A", "Plugin-B", "Plugin-C"],

排序是倒序的形式,例如上方将按 Plugin-CPlugin-B 然后再 Plugin-A 运行

插件

通过在 配置文件 中应用插或预设,可以启用 Babel 的代码转换。

使用一个插件

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

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

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

json
{
  "plugins": ["./node_modules/XXX/babel-plugin-xxPlugin"]
}
{
  "plugins": ["./node_modules/XXX/babel-plugin-xxPlugin"]
}

插件排序

  • 插件在预设之前运行
  • 插件排序是从第一个到最后一个

插件开发

要开发自己的插件,需要导出一个函数,函数返回一个插件对象

  • Github 此仓库将会指导如何创建自己的插件

一个逆转名称的简单插件示例

js
export default function () {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name;
        // 逆转名称:JavaScript -> tpircSavaJ
        path.node.name = name.split("").reverse().join("");
      },
    },
  };
}
export default function () {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name;
        // 逆转名称:JavaScript -> tpircSavaJ
        path.node.name = name.split("").reverse().join("");
      },
    },
  };
}

Released under the MIT License.