跳至主内容

预设

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

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 预设并停止发布。由于这些提案本身易变，建议用户改为指定单个提案作为插件，而非使用需要持续维护的通用预设。更多背景请参阅blog。

stage-x 预设中的转换均属尚未批准纳入 JavaScript 正式版本（如 ES6/ES2015）的语言变更。

TC39 将提案分为以下阶段：

  • Stage 0 - 稻草人阶段：初步构想，可能实现为 Babel 插件

  • Stage 1 - 提案阶段：值得推进的方案

  • Stage 2 - 草案阶段：初始规范

  • Stage 3 - 候选阶段：完整规范及浏览器初步实现

  • Stage 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。

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

预设选项​

插件和预设都支持通过将名称和选项对象包裹在数组中的方式进行配置。

以下三种写法在不指定选项时完全等效：

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