预设

Babel 预设可以作为 Babel 插件和/或配置 options 的可共享集合。

官方预设

我们为常见环境组装了一些预设

其他集成

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

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

使用预设

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

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

否则，您也可以指定预设的相对路径或绝对路径。

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

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

Stage-X（实验性预设）

已弃用

从 Babel 7 开始，我们决定弃用 Stage-X 预设并停止发布它们。因为这些提案本身就容易发生变化，所以最好让用户将单个提案指定为插件，而不是使用您无论如何都需要检查的全部预设。查看我们的博客了解更多上下文。

stage-x 预设中的任何转换都是对尚未被批准成为 JavaScript 版本（例如 ES6/ES2015）一部分的语言的更改。

TC39 将提案分为以下阶段

阶段 0 - Strawman：只是一个想法，可能是 Babel 插件。
阶段 1 - 提案：这值得研究。
阶段 2 - 草案：初始规范。
阶段 3 - 候选：完整的规范和初始浏览器实现。
阶段 4 - 完成：将添加到下一个年度版本中。

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

TC39 阶段流程也在 Yehuda Katz (@wycatz) 在 thefeedbackloop.xyz 上的几篇文章中详细解释：阶段 0 和 1，阶段 2，阶段 3

创建预设

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

它可以只返回一个插件数组。

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

预设可以包含其他预设，以及带有选项的插件。

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

有关更多信息，请查看有关预设的 babel 手册部分。

预设顺序

预设顺序是反向的（从后到前）。

babel.config.json
{
  "presets": ["a", "b", "c"]
}

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

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

预设选项

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

对于不指定选项，以下所有内容都是等效的

babel.config.json
{
  "presets": [
    "presetA", // bare string
    ["presetA"], // wrapped in array
    ["presetA", {}] // 2nd argument is an empty options object
  ]
}

要指定选项，请传递一个对象，其中键作为选项名称。

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

官方预设​

其他集成​

使用预设​

Stage-X（实验性预设）​

创建预设​

预设顺序​

预设选项​