Babel7 转码（二） - @babel/preset-env + @babel/polyfill

@babel/preset-env + @babel/polyfill

webpack 搭建文档： https://webpack.eleven.net.cn

@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

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 的设置，那么能够经过这个字段来作统一的设置。