Babel7 转码（三）- preset-env + transform-runtime

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

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

@babel/preset-env + @babel/plugin-transform-runtime 搭配使用，可以完成基本语法转译 + ES 新语法的按需加载，这是配置 Babel 转码的第二种方式。

1. 安装依赖包

   yarn add @babel/plugin-transform-runtime -D

   1. 如果配置参数 corejs 未设置或为 false，需安装依赖@babel/runtime（这部分代码会被抽离并打包到应用 js 里，所以可以安装在 dependencies 里），仅对 es6 语法转译，而不对新 API 转译。

      yarn add @babel/runtime

   2. 如果配置参数 corejs 设置为 2，需安装依赖@babel/runtime-corejs2（同上，推荐安装在 dependencies 里。），对语法、新 API 都转译。

      yarn add @babel/runtime-corejs2

   3. 推荐使用corejs:2，但是，检测不到‘hello‘.includes(‘h‘)这种句法，所以存在一定隐患，书写代码时需注意。
   4. @babel/runtime 和 @babel/runtime-corejs2 这两个库唯一的区别是：corejs2 这个库增加了对 core-js（用来对 ES6 各个语法 polyfill 的库）这个库的依赖，所以在 corejs 为 false 的情况下，只能做语法的转换，并不能 polyfill 任何新 API。

2. .babelrc 文件写上配置

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "modules": false
         }
       ]
     ],
     "plugins": [
       [
         "@babel/plugin-transform-runtime",
         {
           "corejs": 2 // 推荐
         }
       ]
     ]
   }

3. 配置参数

   1. corejs，默认值是 false，只对语法进行转换，不对新 API 进行处理；当设置为 2 的时候，需要安装@babel/runtime-corejs2，这时会对 api 进行处理。
   2. helpers，默认值是 true，用来开启是否使用 helper 函数来重写语法转换的函数。
   3. useESModules，默认值是 false，是否对文件使用 ES 的模块语法，使用 ES 的模块语法可以减少文件的大小。