Edit

Presets

不想自己设置插件？没问题！Presets 可以像一组 Babel 插件那样操作甚至可共享options配置。

官方 Presets

我们为常见环境组装了一些 presets ：

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

在 npm 上有许多其他社区维护的 presets 可用!

Stage-X (试验性 Presets)

Stage-x presets 中的任何转换都是针对未发布的 Javascript 特性（如 ES6 / ES2015）的更改。

可调整的改变

这些提案可能会有所变化，因此请谨慎使用，特别是对于第3阶段之前的提案。我们计划在每次 TC39 会议后尽快更新变化到 stage-x presets。

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。

创建 Preset

只需要导出一个配置，就可以创建自己的 preset。

它只是返回一个插件数组而已...

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

Presets 可以包含其他的 presets 以及带有选项的插件。

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

有关更多信息，请查看 babel handbook 部分。

Preset 路径

如果 preset 在 npm 上，你可以传入预设名称，babel 将检查它是否已安装在 node_modules 中

{
  "presets": ["babel-preset-myPreset"]
}

还可以指定 presets 的相对/绝对路径。

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

Preset 简写

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

{
  "presets": [
    "myPreset",
    "babel-preset-myPreset" // 等同
  ]
}

这也适用于 scoped 包：

{
  "presets": [
    "@org/babel-preset-name",
    "@org/name" // 等同
  ]
}

Preset 顺序

Preset 的顺序是相反的(从最后一个到第一个).

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

将会按照以下顺序运行：c, b, 然后 a。

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

Preset 选项

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

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

{
  "presets": [
    "presetA",
    ["presetA"],
    ["presetA", {}],
  ]
}

要指定选项，请使用选项名称作为 key 传递对象。

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