Babel7 转码（五）- corejs3 的更新

corejs3 的更新

前文介绍了 core-js@2 的配置，而 core-js@3 的更新，带来了新的变化，@babel/polyfill 无法提供 core-js@2 向 core-js@3 过渡，所以现在有新的方案去替代 @babel/polyfill。需要 babel-loader 版本升级到 8.0.0 以上，@babel/core 版本升级到 7.4.0 及以上。

推荐阅读官方的几篇文档，必定大有帮助：

1. 作者的官方阐述
2. Babel 7.4.0 版本的更新内容，及官方的升级建议
3. core-js@2 向core-js@3 升级，官方的 Pull request

@babel/preset-env 也因 core-js@3 的原因，需要配置 corejs 参数去指定使用的corejs 版本，否则 webpack 运行时会报 warning。

在前面的文章（https://segmentfault.com/a/11...）中已经阐述过——想要转译 ES 的新语法 + 新API，可以有以下两套方案：

方案一：@babel/preset-env + @babel/polyfill

方案二：@babel/preset-env + @babel/plugin-transform-runtime + @babel/runtime-corejs2

这两套方案取其一即可，其中，@babel/preset-env 提供转译 ES 新语法，剩下的事情（即 ES 的新 API，例如：Proxy 转译）才是 @babel/polifill 或 @babel/plugin-transform-runtime 需要去解决的事情。

以下，分别给出两种方案在 corejs@3 时的升级策略（如果不清楚这两种方案的异同，仍然推荐阅读这一篇：https://segmentfault.com/a/11... ，新版本只是需要的包、配置不同，内在原理还是一样）。

polyfill 垫片方案 的升级策略：

根据 useBuiltIns 配置参数不同，既可以按需加载垫片，也可以不按需。

@babel/polyfill 不必再安装，转而需要依靠 core-js 和 regenerator-runtime（详细原因请看作者的阐述），替代方案用法如下：

1. 安装依赖

   yarn add babel-loader @babel/core @babel/preset-env -D
   yarn add core-js regenerator-runtime @babel/runtime

2. .babelrc配置

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "modules": false, // 对ES6的模块文件不做转化，以便使用tree shaking、sideEffects等
           "useBuiltIns": "entry", // browserslist环境不支持的所有垫片都导入
           // https://babeljs.io/docs/en/babel-preset-env#usebuiltins
           // https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md
           "corejs": {
             "version": 3, // 使用core-js@3
             "proposals": true,
           }
         }
       ]
     ],
     "plugins": [
       [
         "@babel/plugin-transform-runtime",
           {
             "corejs": false // 解决 helper 函数重复引入
           }
       ]
     ]
   }

3. js代码里取代原先的import '@babel/polyfill'，做如下修改：

   import "core-js/stable"
   import "regenerator-runtime/runtime"

transform-runtime 按需加载方案 的升级策略：

1. 安装依赖

   yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
   yarn add @babel/runtime-corejs3

2. .babelrc文件配置

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "modules": false,
         }
       ]
     ],
     "plugins": [
       [
         "@babel/plugin-transform-runtime",
         {
           "corejs": {
             "version": 3,
             "proposals": true
           },
           "useESModules": true
         }
       ]
     ]
   }