Skip to main content

预设

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

¥Babel presets can act as sharable set of Babel plugins and/or config options.

官方预设​

¥Official Presets

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

¥We've assembled a few presets for common environments:

其他整合​

¥Other Integrations

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

¥If you aren't using Babel directly, the framework you are using may have its own configuration for you to use or extend. Many other community maintained presets are available on npm!

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

使用预设​

¥Using a Preset

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

¥Within a Babel config, if the preset is on npm, you can pass in the name of the preset and Babel will check that it's installed in node_modules already. This is added to the presets config option, which takes an array.

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

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

¥Otherwise, you can also specify a relative or absolute path to your presets.

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

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

¥See name normalization for more specifics on configuring the path of a plugin or preset.

Stage-X（实验性预设）​

¥Stage-X (Experimental Presets)

弃用

从 Babel 7 开始，我们决定弃用 Stage-X 预设并停止发布它们。因为这些提案本质上可能会发生变化，所以最好要求用户将单个提案指定为插件，而不是无论如何都需要检查的全部预设。查看我们的 blog 了解更多信息。

¥As of Babel 7, we've decided to deprecate the Stage-X presets and stop publishing them. Because these proposals are inherently subject to change, it seems better to ask users to specify individual proposals as plugins vs. a catch all preset that you would need to check up on anyway. Check out our blog for more context.

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

¥Any transforms in stage-x presets are changes to the language that haven't been approved to be part of a release of JavaScript (such as ES6/ES2015).

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

¥The TC39 categorizes proposals into the following stages:

  • 阶段 0 - 稻草人：只是一个想法，可能的 Babel 插件。

    ¥Stage 0 - Strawman: just an idea, possible Babel plugin.

  • 阶段 1 - 提议：这是值得努力的。

    ¥Stage 1 - Proposal: this is worth working on.

  • 第二阶段 - 草稿：初始规范

    ¥Stage 2 - Draft: initial spec.

  • 第三阶段 - 候选人：完整的规范和初始浏览器实现。

    ¥Stage 3 - Candidate: complete spec and initial browser implementations.

  • 第四阶段 - 完成的：将添加到下一个年度版本中。

    ¥Stage 4 - Finished: will be added to the next yearly release.

有关更多信息，请务必查看 当前的 TC39 提案 及其 工艺文件。

¥For more information, be sure to check out the current TC39 proposals and its process document.

Yehuda Katz (@wycatz) 在 thefeedbackloop.xyz 的几篇文章中也详细解释了 TC39 阶段过程：阶段 0 和 1, 第二阶段, 第三阶段

¥The TC39 stage process is also explained in detail across a few posts by Yehuda Katz (@wycatz) over at thefeedbackloop.xyz: Stage 0 and 1, Stage 2, Stage 3

创建预设​

¥Creating a Preset

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

¥To make your own preset (either for local usage or to npm), you need to export a config object.

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

¥It could just return an array of plugins..

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

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

¥Presets can contain other presets, and plugins with options.

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 手册 部分。

¥For more info, check out the babel handbook section on presets.

预设顺序​

¥Preset Ordering

预设顺序是相反的（最后到第一个）。

¥Preset ordering is reversed (last to first).

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

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

¥Will run in the following order: c, b, then a.

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

¥This was mostly for ensuring backwards compatibility, since most users listed "es2015" before "stage-0".

预设选项​

¥Preset Options

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

¥Both plugins and presets can have options specified by wrapping the name and an options object in an array inside your config.

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

¥For specifying no options, these are all equivalent:

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

要指定选项，请将带有键的对象作为选项名称传递。

¥To specify an option, pass an object with the keys as the option names.

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