@babel/preset-env + @babel/polyfill

@babel/preset-env + @babel/polyfill 可以完全实现 ES 基础语法的转译 + 新 API 的转译，这是配置 Babel 转码的第一种方式。

@babel/preset-env

基本的语法转换，需要添加预设 @babel/preset-env。

1. 安装依赖包

   yarn add @babel/preset-env -D

2. 添加配置

   {
     "presets": [
       [
          "@babel/preset-env",
          {"modules": false, // 对 ES6 的模块文件不做转化，以便使用 tree shaking、sideEffects 等}
       ]
     ],
     "plugins": []}

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。
转译新的 API，需要借助 polyfill 方案去解决，使用 @babel/polyfill 或@babel/plugin-transform-runtime，二选一即可。

@babel/polyfill

本质上 @babel/polyfill 是 core-js 库的别名，随着 core-js@3 的更新，@babel/polyfill 无法从 2 过渡到 3，所以 @babel/polyfill 已经被放弃，请查看 corejs 3 的更新。

1. 安装依赖包：

   yarn add @babel/polyfill  -D

2. .babelrc 文件写上配置，@babel/polyfill 不用写入配置，会根据 useBuiltIns 参数去决定如何被调用。

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "useBuiltIns": "entry",
           "modules": false,
           "corejs": 2, // 新版本的 @babel/polyfill 包含了 core-js@2 和 core-js@3 版本，所以需要声明版本，否则 webpack 运行时会报 warning，此处暂时使用 core-js@2 版本（末尾会附上 @core-js@3 怎么用）}
       ]
     ]
   }

3. 配置参数

   1. modules，"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false，默认值是 auto。
      用来转换 ES6 的模块语法。如果使用 false，将不会对文件的模块语法进行转化。
      如果要使用 webpack 中的一些新特性，比如 tree shaking 和 sideEffects，就需要设置为 false，对 ES6 的模块文件不做转化，因为这些特性只对 ES6 的模块有效。

   2. useBuiltIns，"usage" | "entry" | false，默认值是 false。

      • false：需要在 js 代码第一行主动 import ‘@babel/polyfill’，会将 @babel/polyfill 整个包全部导入。
        （不推荐，能覆盖到所有 API 的转译，但体积最大）
      • entry：需要在 js 代码第一行主动 import ‘@babel/polyfill’，会将 browserslist 环境不支持的所有垫片都导入。
        （能够覆盖到‘hello‘.includes(‘h‘)这种句法，足够安全且代码体积不是特别大）
      • usage：项目里不用主动 import，会自动将代码里已使用到的、且 browserslist 环境不支持的垫片导入。
        （但是检测不到‘hello‘.includes(‘h‘)这种句法，对这类原型链上的句法问题不会做转译，书写代码需注意）
   3. targets，用来配置需要支持的的环境，不仅支持浏览器，还支持 node。如果没有配置 targets 选项，就会读取项目中的 browserslist 配置项。
   4. loose，默认值是 false，如果 preset-env 中包含的 plugin 支持 loose 的设置，那么可以通过这个字段来做统一的设置。