Babel-7-转码五-corejs3-的更新

113次阅读

共计 1283 个字符,预计需要花费 4 分钟才能阅读完成。

corejs3 的更新

  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 参数,否则 webpack 运行时会报 warning;
  3. @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"
  4. 而 @babel/plugin-transform-runtime,也随着 core-js@3 有更新:

    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
            }
          ]
        ]
      }

正文完
 0