Babel7 转码(五)- corejs3 的更新

Eleven

corejs3 的更新

前文介绍了 core-js@2 的配置,而 core-js@3 的更新,带来了新的变化,@babel/polyfill 无法提供 core-js@2core-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-jsregenerator-runtime(详细原因请看作者的阐述),替代方案用法如下:

  1. 安装依赖

    yarn add babel-loader @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"
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
          }
        ]
      ]
    }
阅读 9.6k

Webpack搭建备忘录
webpack搭建配置深入解析,探索常见坑点、最正确有效的玩法。
237 声望
20 粉丝
0 条评论
237 声望
20 粉丝
宣传栏