预设（Presets）

Babel 的预设（preset）可以被看作是一组 Babel 插件和/或 options 配置的可共享模块。

官方提供的预设​ (opens new window)

我们已经针对常用环境编写了一些预设（preset）：

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

其他整合 (opens new window)

如果你不直接使用 Babel，你使用的框架可能有自己的配置供你使用或扩展。npm 上 (opens new window) 提供了许多其他社区维护的预设！

下一个.js | Nuxt.js | 包裹 | 笑话 | 盖茨比

使用预设 (opens new window)

在 Babel 配置中，如果预设在npm (opens new window) 上，你可以传入预设的名称，Babel 将检查它是否node_modules已经安装。这被添加到预设 (opens new window) 配置选项中，它采用一个数组。

babel.config.json

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

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

babel.config.json

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

有关配置插件或预设路径的更多细节，请参阅名称规范化。 (opens new window)

Stage-X（实验性质的预设）​ (opens new window)

弃用 从 Babel 7 开始，我们决定弃用 Stage-X 预设并停止发布它们。因为这些提案本质上会发生变化，所以最好是要求用户将个别提案指定为插件，而不是你无论如何都需要检查的一个包罗万象的预设。查看我们的博客 (opens new window) 了解更多背景信息。

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

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

• Stage 0 - 设想（Strawman）：只是一个想法，可能有 Babel插件。
• Stage 1 - 建议（Proposal）：这是值得跟进的。
• Stage 2 - 草案（Draft）：初始规范。
• Stage 3 - 候选（Candidate）：完成规范并在浏览器上初步实现。
• Stage 4 - 完成（Finished）：将添加到下一个年度版本发布中。

有关详细信息，请务必查看 current TC39 proposals 及其 process document 。

TC39 各阶段的流程也在一些文章中有详细的解释，在 Yehuda Katz (@wycatz) 的 thefeedbackloop.xyz 网站上：Stage 0 and 1 (opens new window) 、Stage 2 (opens new window) 、Stage 3 (opens new window)

创建预设​ (opens new window)

如需创建一个自己的预设（无论是为了本地使用还是发布到 npm），需要导出（export）一个配置对象。

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

JavaScript

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

preset 可以包含其他的 preset，以及带有参数的插件。

JavaScript

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

有关更多信息，请参考 babel 手册 中关于 preset 的部分。

预设的排列顺序​ (opens new window)

Preset 是逆序排列的（从后往前）。

babel.config.json

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

将按如下顺序执行： c、b然后是 a。

这主要是为了确保向后兼容，由于大多数用户将 "es2015" 放在 "stage-0" 之前。

预设的参数​ (opens new window)

插件和 preset 都可以接受参数，参数由插件名和参数对象组成一个数组，可以在配置文件中设置。

如果不指定参数，下面这几种形式都是一样的：

babel.config.json

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

要指定参数，请传递一个以参数名作为键（key）的对象。

babel.config.json

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