Babel7 轉碼（五）- corejs3 的更新

corejs3 的更新

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

1. 前文介紹了 core-js@2 的配置，而core-js@3的更新，帶來了新的變化，@babel/polyfill沒法提供core-js@2向core-js@3過渡，因此如今有新的方案去替代@babel/polyfill，（須要Babel版本升級到7.4.0及以上），詳細能夠閱讀官方的幾篇文檔（一定大有幫助）：

   1. 做者的官方闡述
   2. Babel 7.4.0版本的更新內容，及官方的升級建議
   3. core-js@2向core-js@3升級，官方的Pull request
2. @babel/preset-env也因core-js@3的緣由，須要配置corejs參數去指定使用的corejs版本，不然webpack運行時會報warning；
3. 在前面的文章（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）纔是 @babel/polifill 或 @babel/plugin-transform-runtime 須要去解決的事情。如下，分別給出兩種方案在 corejs@3 時的升級策略（若是不清楚這兩種方案的異同，仍然推薦閱讀這一篇：https://segmentfault.com/a/11... ，新版本只是須要的包、配置不一樣，內在原理仍是同樣）。

4. polyfill 墊片方案（根據 useBuiltIns 配置參數不一樣，既能夠按需加載，也能夠不按需）的升級策略：
   @babel/polyfill沒必要再安裝，轉而須要依靠core-js和regenerator-runtime（詳細緣由請看做者的闡述），替代方案用法以下：

   1. 安裝依賴

      yarn add babel-loader@8 @babel/core @babel/preset-env -D
      yarn add core-js regenerator-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": []
      }

   3. js代碼裏取代原先的import '@babel/polyfill'，作以下修改：

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

5. transform-runtime 按需加載方案 的升級策略：

   1. 安裝依賴

      yarn add babel-loader@8 @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
            }
          ]
        ]
      }