1️⃣ babel预设

**npm i -D @babel/preset-env**
babel有多种预设，最常见的预设是**@babel/preset-env**
**@babel/preset-env**可以让你使用最新的JS语法，而无需针对每种语法转换设置具体的插件

  1. {
  2.   "presets": [
  3.     "@babel/preset-env"
  4.   ]
  5. }

1️⃣ 兼容的浏览器

**@babel/preset-env**需要根据兼容的浏览器范围来确定如何编译，和postcss一样，可以使用文件**.browserslistrc**来描述浏览器的兼容范围

  1. last 3 version
  2. > 1%
  3. not ie <= 8

1️⃣ 自身的配置

和**postcss-preset-env**一样，**@babel/preset-env**自身也有一些配置

具体的配置见：https://www.babeljs.cn/docs/babel-preset-env#options

配置方式是：

  1. {
  2.   "presets": [
  3.     ["@babel/preset-env", {
  4.       "配置项1": "配置值",
  5.       "配置项2": "配置值",
  6.       "配置项3": "配置值"
  7.     }]
  8.   ]
  9. }

其中一个比较常见的配置项是**usebuiltins**，该配置的默认值是 false
它有什么用呢？由于该预设仅转换新的语法，并不对新的API进行任何处理

  1. // 例如：
  2. new Promise(resolve => {
  3.     resolve()
  4. })
  5. // 转换的结果为
  6. new Promise(function (resolve) {
  7.   resolve();
  8. });

如果遇到没有 Promise 构造函数的旧版本浏览器，该代码就会报错
而配置 **usebuiltins** 可以在编译结果中注入这些新的API，它的值默认为 **false**，表示不注入任何新的API，可以将其设置为 **usage**，表示根据API的使用情况，按需导入API

  1. {
  2.   "presets": [
  3.     ["@babel/preset-env", {
  4.       "useBuiltIns": "usage", // @babel/preset-env 编译新的 API 使用 core-js 这个库需要安装 corejs 库, 默认使用 core-js2 版本的库
  5.       "corejs": 3 // 告诉 @babel/preset-env 使用 corejs3 版本
  6.       // 如果使用更新的语法或 API 根据不同的编译引入在安装不同的库
  7.     }]
  8.   ]
  9. }