Edit

预设

Babel 预设可以作为 Babel 插件和配置 选项 的共享集。

官方预设

我们为常见环境组合了几个预设：

其它集成

如果你没有直接使用 Babel，那么你正在使用的框架可能有自己的配置供您使用或扩展。npm 上 提供了许多其他社区维护的预设！

Next.js | Nuxt.js | Parcel | Jest | Gatsby

使用预设

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

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

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

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

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

Stage-X (实验性预设)

废弃

从 Babel 7 开始，我们决定废弃 Stage-X 预设，并停止发布它们。因为这些提案本身就容易改变，所以让用户将单个提案指定为插件似乎更好，而不是一个你无论如何都需要检查的“包罗万象”的预设。请查阅我们的 博客 了解更多背景信息。

stage-x 预设中的任何转换都是对一部分未经批准作为 JavaScript 发行版的更改（例如 ES6 / ES2015）。

TC39 将提案分为以下几个阶段：

  • Stage 0 - 稻草人：只是一个想法，可能是 Babel 插件。
  • Stage 1 - 提案：这值得努力。
  • Stage 2 - 草案：初始规范。
  • Stage 3 - 候选：完整的规范和初始的浏览器实现。
  • Stage 4 - 完成：将被添加到下一个年度发行版中。

有关更多信息，请务必查阅 当前的 TC39 提案 及其 流程文档。

Yehuda Katz (@wycatz) 在 thefeedbackloop.xyz 的几个帖子中也详细解释了 TC39 阶段的流程：Stage 0 and 1, Stage 2, Stage 3

创建预设

要制作你自己的预设（本地使用或 npm），您需要导出一个配置对象。

它可以返回一个插件数组..

module.exports = function() {
  return {
    plugins: ["pluginA", "pluginB", "pluginC"],
  };
};

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

module.exports = () => ({
  presets: [require("@babel/preset-env")],
  plugins: [
    [require("@babel/plugin-proposal-class-properties"), { loose: true }],
    require("@babel/plugin-proposal-object-rest-spread"),
  ],
});

要了解更多信息，请查阅 babel 手册 中关于预设的部分。

预设排序

预设排序是倒序（从最后一个到第一个）。

{
  "presets": ["a", "b", "c"]
}

将按以下顺序运行：c，b，然后 a。

这主要是为了确保向后兼容，因为大多数用户在 "stage-0" 之前列出了 "es2015"。

预设选项

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

如果指定可选项，以下都是等效的：

{
  "presets": [
    "presetA", // 单字符串
    ["presetA"], // 包装在数组中
    ["presetA", {}] // 第 2 个参数是一个空的配置对象
  ]
}

若要指定选项，请传递一个以键作为选项名称的对象。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true,
        "modules": false
      }
    ]
  ]
}
← Config Options插件 →