Babel7的学习总结

前言

在学习配置babel的时候， 一直搞不清楚 @babel/polyfill, @babel/runtime以及 @babel/plugin-transform-runtime如何使用， 现在将自己的理解进行总结， 如有错误，希望看官可以指正。

@babel/preset-env

根据配置的浏览器环境， 进行 syntax transforms， 以及 polyfills

{
  "presets": [
    ["@babel/preset-env"]
  ]
}

源代码 转换后的代码 （包含大量的辅助函数）

以上 还是仅仅对 一些语法进行转换 比如 class, async/await 进行转换，但是对于Promise 这些特性 不会进行扩展， 但是 @babel/preset-env 参数可以配置；

useBuiltIns

配置@babel/preset-env如何处理 polyfills （这边就涉及到了 @babel/polyfill）

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage" 
    }]
  ]
}

重新生成后的代码

新增了 以上的代码，

• 引入了 regenerator-runtime 和 core-js 依赖 （@babel/polyfill）
• 对 Promise 进行 扩展包

@babel/polyfill

🚨 As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions) 在 7.4.0 之后 该包 被 废弃， 对于 包内的regenerator-runtime 和 core-js 需要 直接安装

对此， 对于 @babel/polyfill 使用的环境，在与 babel < 7.4.0

@babel/runtime 和 @babel/plugin-transform-runtime

@babel/runtime

• 使用环境: 生产环境
• 安装方式： yarn add @babel/runtime

@babel/plugin-transform-runtime

• 使用环境: 开发环境
• 安装方式： yarn add --dev @babel/plugin-transform-runtime

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": false,
      "corejs": false
    }]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime"] // corejs: false
  ]
}
}

生成新的代码的前后对比， 删掉了@babel/polyfill的扩展，新增了 @babel/runtime , 但是 可以看出， 对Promise 依旧 没有进行 扩展， 那是因为我们 没有配置 @babel/plugin-transform-runtime的 corejs的属性， 他默认是 false

• corejs: false, 2, 3 or { version: 2 | 3, proposals: boolean }, defaults to false corejs: 2: 只支持全局变量 和 静态属性 例如 Promise ， Array.from corejs: 3: 不仅包含 corejs2的特性， 也包含 对 实例属性 （原型链）: [].includes() 针对需要安装 对应的依赖包 corejs option | Install command | | --------------- | ------------------------------------------- | | false | npm install --save @babel/runtime | | 2 | npm install --save @babel/runtime-corejs2 | | 3 | npm install --save @babel/runtime-corejs3 |

babel的配置文件

新增了对 Promise的扩展

总结

1. 对于 babel < 7.4.0:， 使用 @babel/polyfill 配合 @babel/preset-env的useBuiltIns 和 corejs 进行使用
2. 对于 babel >= 7.4.0: 关闭 @babel/preset-env的 useBuiltIns: false 和 corejs: false ，使用 引入 @babel/runtime 和 @babel/plugin-transform-runtime