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 预设并停止发布它们。因为这些提案本质上可能会发生变化，所以让用户将单个提案作为插件指定，而不是使用一个你无论如何都需要检查的通用预设，似乎更合理。更多背景信息请查看我们的 博客 。

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 插件。
  • 阶段 1 - 提议：这个值得研究一下。
  • 阶段 2 - 草稿：初步规范。
  • 阶段 3 - 候选人：完成规范和初步浏览器实现。
  • 阶段4 - 完成：将加入下一年度版本。

想了解更多信息，一定要查看最新的 TC39 提案 以及它的 流程文档。

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

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

🌐 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.

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

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 手册 中关于预设的部分。

🌐 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
      }
    ]
  ]
}