babel 配置

@babel/preset-env

通过配置 useBuiltIns 参数有三种实现方式

1. "entry"

需要在入口文件添加import "core-js"，打包后会根据 browserslist 将import "core-js"替换为浏览器不兼容的所有 polyfill。

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

2. "useage"

参照目标浏览器和代码中所使用到的特性按需引入 polyfill，需要填写另一个参数 corejs

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

Babel 编译通常会排除 node_modules，所以 "useBuiltIns": "usage" 存在风险，可能无法为依赖包添加必要的 polyfill。

3. "false"(默认值)

此时不对 polyfill 做操作。如果引入 @babel/polyfill，则无视配置的浏览器兼容，引入所有的 polyfill。

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

@babel/runtime + @babel/plugin-transform-runtime

@babel/runtime 把所有语法转换会用到的辅助函数都集成在了一起。
@babel/plugin-transform-runtime 有三大作用，其中之一就是自动移除语法转换后内联的辅助函数（inline Babel helpers），使用 @babel/runtime/helpers 里的辅助函数来替代。

{
  "presets": [
    ["@babel/preset-env"]
  ],
  "plugins": [
    [ 
      "@babel/plugin-transform-runtime", {
        "corejs": 3
      }
    ]
  ]
}

指定执行环境 Browserslist， Browserslist 的配置有几种方式，并按下面的优先级使用：

1. @babel/preset-env 里的 targets
2. package.json 里的 browserslist 字段
3. browserslistrc 配置文件