掌握 Babel 预设：官方预设与配置选项深度解析 (5)

Babel 的预设（presets）是一组插件的集合，用于简化配置过程。预设可以让你一次性启用一组相关的插件，从而减少配置的复杂性。以下是如何使用 Babel 预设的基本步骤和一些细节说明。

安装预设

首先，你需要安装所需的预设。例如，要使用 @babel/preset-env，可以运行以下命令：

pnpm add --save-dev @babel/preset-env

在配置文件中指定预设

在 Babel 配置文件（如 .babelrc 或 babel.config.js）中添加预设配置：

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

预设的运行顺序

预设数组中的预设会按照从后往前的顺序依次执行。例如：

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

在这个配置中，@babel/preset-react 会先于 @babel/preset-env 执行。

运行的顺序刚好和插件是相反的，从后往前运行。

官方预设

官方提供了几套常用的预设：

• @babel/preset-env：用于编译 ES2015 及以上版本的语法。
• @babel/preset-typescript：用于 TypeScript。
• @babel/preset-react：用于 React。
• @babel/preset-flow：用于 Flow。

Stage-x 预设

在 Babel v7.0.0 之前，支持一种叫做 stage-x 的预设特性。这些预设对应了 TC39 提案的不同阶段：

• Stage 0 - Strawman：只是一个想法或者提案，还没有任何实现。
• Stage 1 - Proposal：这是一个正式的提案，包含 API 的描述，但可能还没有完全实现。
• Stage 2 - Draft ：初步版本，已经有了初步的规范文本，并且大部分细节都已经确定。
• Stage 3 - Candidate：候选阶段，规范已经完成，并且已经完成了浏览器的初步实现，这个阶段主要是为了获取反馈和评估。
• Stage 4 - Finished：完成阶段，已经在多个浏览器中实现并通过了实际使用的测试，可以被添加到 ECMAScript 标准中。

在早期的时候（Babel v7.x.x 之前），可以安装对应阶段的预设，例如：

npm install --save-dev @babel/preset-stage-2

然后在配置文件中使用：

{
  "presets": ["@babel/preset-stage-2"]
}

但是从 Babel v7.0.0 开始，stage-x 预设已经被废弃了。目前推荐的做法是直接安装并使用具体的插件。

@babel/preset-env

@babel/preset-env 是一个非常强大的预设，可以根据目标环境自动选择需要的插件。以下是 @babel/preset-env 的一些常用配置选项：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": "3.22",
        "modules": false
      }
    ]
  ]
}

• targets：指定浏览器需要支持的版本范围。

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": "> 0.25%, not dead"
      }]
    ]
  }
  

• useBuiltIns：决定如何使用 polyfills。

  • "entry"：根据项目中 browserslist 对应的浏览器版本范围来添加 polyfills。无论源码中是否用到了缺失的特性，只要对应的浏览器版本不支持，就会添加对应的 polyfill。使用此选项时，还需要在源码的入口文件中手动引入 core-js。
  • "usage"：根据源码中是否使用了缺失的特性，如果使用到了缺失的特性，才会添加对应的 polyfills。
  • false：默认值，关闭自动引入 polyfills。

• corejs：指定 core-js 的版本，polyfills 实际上是通过 core-js 来实现的。该配置项通常与 useBuiltIns 一起使用。

  {
    "presets": [
      ["@babel/preset-env", {
        "useBuiltIns": "usage",
        "corejs": 3
      }]
    ]
  }
  

  • "2"：使用 core-js 的版本 2。这是旧版本的 core-js，它包含 ES5、ES6 和 ES7 的特性。
  • "3"：使用 core-js 的版本 3。这是新版本的 core-js，它包含 ES5、ES6、ES7、ES8 及更高版本的特性。
  • false：不使用 core-js。如果你不想让 Babel 添加任何 polyfill，可以将 corejs 设置为 false。

• modules：设置模块的类型。

  • "amd"
  • "umd"
  • "systemjs"
  • "commonjs"
  • "cjs"
  • "auto"
  • false

  默认值为 auto，根据你的环境和代码自动决定使用的模块类型。

• include：允许你显式地指定要包含的插件（这些插件本身在预设里面，但由于 targets 的设置可能会被排除掉）。

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": "> 0.25%, not dead",
        "include": ["@babel/plugin-proposal-optional-chaining"]
      }]
    ]
  }
  

假设 @babel/preset-env 里面有 pluginA、pluginB、pluginC，假设你现在指定了浏览器范围，所指定的这些浏览器范围已经实现了特性 A 和特性 B，那么这里就只会用到 pluginC。include 配置项可以强行指定要包含的插件。

示例

假设你有一个项目结构如下：

/my-project
|-- src
|   |-- index.js
|-- .babelrc
|-- package.json

• .babelrc

  {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": "> 0.25%, not dead",
          "useBuiltIns": "usage",
          "corejs": 3,
          "include": ["@babel/plugin-proposal-optional-chaining"]
        }
      ],
      "@babel/preset-react"
    ]
  }
  

• src/index.js

  const greet = (name) => `Hello, ${name}!`;
  
  async function fetchData() {
    // 异步操作
  }
  
  console.log(greet("World"));
  await fetchData();
  

• package.json

  {
    "scripts": {
      "build": "babel src --out-dir lib"
    }
  }
  

• 运行构建脚本

  pnpm run build
  

  这个脚本会编译 src 目录下的所有文件，并将结果输出到 lib 目录下。@babel/preset-env 会根据配置转换 ES2015 及以上版本的语法，并根据 targets 和 useBuiltIns 选项自动添加必要的 polyfills。@babel/preset-react 会处理 React 代码。

通过这些步骤，你可以灵活地使用 Babel 预设来满足项目的具体需求。