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 的设置，那么可以通过这个字段来做统一的设置。