005.使用预设

基本使用 §

首先第一步仍然是先要安装对应的预设：

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

安装完成后，在配置文件中进行配置：

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

预设对应的值是一个数组，说明也是能够配置多个预设的，运行的顺序刚好和插件是相反的：从后往前运行。

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

官方预设 §

官方提供了 4 套预设：

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

@babel/preset-env §

主要看一下这一套插件对应的 options：

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

• targets：指定浏览器需要支持的版本范围
• useBuiltIns：如何使用 polyfills
  • entry：根据项目中 browserslist 对应的浏览器版本范围来添加 polyfills，这个选项不会管源码中是否用到缺失的特性，只要对应的浏览器版本是缺失的，就会添加对应的特性。而且在使用这个选项值的时候，还需要在源码的入口文件中手动引入 core-js
  • usage：根据源码中是否使用了缺失的特性，如果使用到了缺失的特性，那么才添加对应的 polyfills
  • false：默认值，关闭自动引入 polyfills。
• corejs：指定 core-js 版本，polyfills 就是通过 core-js 实现的。该配置项一般和 useBuiltIns 一起使用
  • 2: 使用 core-js v2。这是旧版本的 core-js，它包含 ES5、ES6 和 ES7 的特性。在 Babel 7.4.0 之前是默认值。
  • 3: 使用 core-js v3。这是新版本的 core-js，它包含 ES5、ES6、ES7、ES8 和更高版本的特性。在 Babel 7.4.0 及更高版本，这是推荐的值。
  • false: 不使用 core-js，不想让 Babel 添加任何 polyfill
• • modules：设置模块的类型
    • amd
    • umd
    • systemjs
    • commonjs
    • cjs
    • auto：默认值，根据环境和代码自动决定使用的模块类型
    • false：不使用模块
• include：显式指定要包含的插件
  • 这些插件是本身在预设里面，但是因为 targets 的设置，可能会被排除掉
  • 假设 preset-env 里面有 pluginA、pluginB、pluginC，假设指定了浏览器范围，所指定的这些浏览器范围已经实现了特性 A 和 特性 B，那么就只会用到 pluginC。那么 include 配置项就可以强行指定要包含的插件

stage-x 预设 §

在 Babel v7.0.0 之前，还支持一种叫做 state-x 的预设特性。

JavaScript 的新特性是由 TC39 的小组提出并且通过一系列的阶段来推动的。一般来讲，这个阶段分为从 0 到 4，每个阶段对应了新特性的不同状态：

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

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

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

这个预设对应了 stage2 阶段的新特性的编译，开发中就可以使用 stage 2 阶段的新语法了。

但是 stage-x 的预设从 v7.0.0 版本开始就已经废弃了：

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.

从 Babel 7 开始，我们决定弃用 Stage-X 预设，并停止发布它们。由于这些提案本质上可能会发生变化，因此最好要求用户将单个提案指定为插件，而不是您无论如何都需要检查的所有预设。

目前官方推荐的做法是要使用哪个新特性，直接安装对应的插件即可。