预设 是一组插件的集合。这是为了方便开发者在实际应用中无需再手动配置各类插件。

官方预设

babel 官方已经提供了一些预设。

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

更多预设

预设的使用配置跟插件的大致相同。

唯一要注意的是，预设的执行顺序与插件是相反的。

@babel/preset-env

该预设可以称作环境预设。

提到环境，有非常重要的两点：代码转换 与 polyfill。恰好 @babel/preset-env 帮我们把这两件事都比较优雅的实现了。

又由于浏览器的版本众多，我们必须在使用预设的时候告诉它，我们的目标浏览器是什么及是什么版本。也就是需要设置 browserslist。

为了行文方便，本章节所有 preset-env 皆指代 @babel/preset-env。

browserslist

在 babel 配合 preset-env使用，共有三种配置方法：

1. .browserslistrc 在项目根目录下添加 .browserslistrc 文件。要注意的是，该文件是全局配置。譬如如果项目有 postcss，那么它也会读取该文件。

> 1%
last 2 versions
not ie <= 8

2. package.json 中设置 browserslist。该配置在项目范围中的作用及优先级同上项。 数组形式：

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

字符串形式：

{
  "browserslist": "> 1%, last 2 versions, not ie <= 8"
}

3. 给预设 @babel/preset-env 设置 target 参数。优先级在这三者中最高。

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": [
          "> 1%",
          "last 2 versions",
          "not ie <= 8"
        ]
      }
    ]
  ]
}

options

下面是一些常见的设置属性。

1. targets

string | Array<string> | { [string]: string }，defaults to {}。

用来设置目标浏览器。

2. modules

"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false，defaults to auto。

用来设置转译后的代码采用何种模块化方式。设置为 false时，将保留采用 ES Module。

在 webpack 项目中，强烈建议设置为 false，将 import 交由 webpack 处理。

因为 webpack 可以对 ES Module 做 tree shaking。

3. useBuiltIns

"usage"| "entry" | false。default to false。

用来配置 preset-env 如何处理 polyfill。

• "usage" 自动按需导入。
• "entry" 入口文件处引入 polyfill，preset-env 会全量导入 polyfill。
• false 不再使用 polyfill。

但 preset-env 并不内置 polyfill，它只是一系列插件的集合。所以我们在使用该配置属性前需要安装@babel/polyfill。

babel@7.4.0 已开始弃用 @babel/polyfill。推荐使用core-js。当使用 core-js 时，需要配合下个属性进行设置。

4. core-js

2, 3 or { version: 2 | 3, proposals: boolean }, defaults to 2

用来配置 core-js 的版本。

当设置其版本为 2 或 3 时，需要对应安装 core-js@2 或 core-js@3。

5. ignoreBrowserslistConfig

Boolean, defaults to false.

配置是否忽略 browserslist 文件及 package.json 中的 browserslist 键。