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. 在前面的文章中已经阐述过——想要转译 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 时的升级策略(如果不清楚这两种方案的异同,仍然推荐阅读这一篇:http://jsdr.info/webpack/babel7%E8%BD%AC%E7%A0%81-polyfill%E5%92%8Ctransform-runtime%E7%9A%84%E5%AF%B9%E6%AF%94/ ,新版本只是需要的包、配置不同,内在原理还是一样)。

  4. polyfill 垫片方案(根据 useBuiltIns 配置参数不同,既可以按需加载,也可以不按需)的升级策略
    @babel/polyfill不必再安装,转而需要依靠core-jsregenerator-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
            }
          ]
        ]
      }
      
分享 提问
comments powered by Disqus