Preset 顺序是从后往前运行。
babel有多种预设，最常见的预设是@babel/preset-env
@babel/preset-env可以让你使用最新的JS语法，而无需针对每种语法转换设置具体的插件

配置

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

兼容的浏览器

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

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

自身的配置

和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进行任何处理
新的api例如promise,当为默认值时是不会处理新的API,需要改为usage，但是还是起不来
这是因为corejs 官方的解释为corejs的默认值为是2，这是使用的第二代的核心
需要使用第三代的核心才能使用
image.png
示例：

  1. {
  2.     "presets": [
  3.         ["@babel/preset-env", {
  4.             "useBuiltIns": "usage",
  5.             "corejs": 3
  6.         }]
  7.     ]
  8. }

当其编译后你会发现编译后的文件里会引入其他包
image.png
如图中的两个包（core-js 和 regenerator-runtime） 是没有安装的 需要安装后才能运行，不然代码会报错

补充：@babel/polyfill 已过时，目前被core-js和generator-runtime所取代