前端 javascript webpack 库开发者如何配置babel,@babel/plugin-transform-runtime的配置说明

本文主要讲解@babel/plugin-transform-runtime以及@babel/runtime的作用

一，@babel/plugin-transform-runtime的api转换功能

在上一篇文章中，已经体现出了它的第一个作用，就是把babel语法转化过程中的辅助函数删除，然后使用@babel/runtime库中的辅助函数引入的方式使用。

其实它还有其他作用，以下三点是它的主要作用：

1.自动移除语法转换后内联的辅助函数（inline Babel helpers），使用@babel/runtime/helpers里的辅助函数来替代；

2.当代码里使用了core-js的API，自动引入@babel/runtime-corejs3/core-js-stable/，以此来替代全局引入的core-js/stable;

3.当代码里使用了Generator/async函数，自动引入@babel/runtime/regenerator，以此来替代全局引入的regenerator-runtime/runtime；

作用2和3其实是在做API转换，对内置对象进行重命名，以防止污染全局环境。

在上一节，我们引入’babel-polyfill’或’core-js/stable与regenerator-runtime/runtime’来做全局的API补齐。但这样可能有一个问题，那就是对运行环境产生了污染。例如Promise，我们的polyfill是对浏览器的全局对象进行了重新赋值，我们重写了Promise及其原型链。

有时候我们不想改变或补齐浏览器的window.Promise，那么我们就不能使用’babel-polyfill’或’core-js/stable与regenerator-runtime/runtime’，因为其会对浏览器环境产生污染（即修改了浏览器的window.Promise）。

这个时候我们就可以使用@babel/plugin-transform-runtime，它可以对我们代码里ES6的API进行转换。

也就是说，这时候就不需要引入’babel-polyfill’或’core-js/stable与regenerator-runtime/runtime’了，而是仅仅引入@babel/plugin-transform-runtime。

于是babel实现兼容低版本浏览器的方案从：

语法转化：@babel/preset-env

api补齐：'babel-polyfill'或'core-js/stable与regenerator-runtime/runtime'

变成了：

语法转化：@babel/preset-env

api转换：@babel/plugin-transform-runtime

重点就在于api补齐，变成了api转换，从而不会影响全局变量。

npm install --save @babel/runtime-corejs3

npm install --save-dev @babel/core @babel/preset-env @babel/plugin-transform-runtime

修改babel.coonfig.js中的配置：

const presets = [["@babel/preset-env", {}]];

const plugins = [

[

"@babel/plugin-transform-runtime",

{

corejs: 3

}

]

];

module.exports = {

plugins,

presets

};

然后运行npm run build,得到的文件中promise被这样命名：

var _Promise = __webpack_require__(/*! @babel/runtime-corejs3/core-js/promise */ "./node_modules/@babel/runtime-corejs3/core-js/promise.js");

我们代码里的Promise变成了_promise[“default”]，而_promise[“default”]拥有ES标准里Promise所有的功能。现在，即使浏览器没有Promise，我们的代码也能正常运行。

这种配置其实主要是npm等库开发者在使用，这样不会修改全局的对象，从而不会影响到库的使用者的业务代码。

值得注意的是，上文我们安装的是@babel/runtime，而这里却是@babel/runtime-corejs3。

**在我们不需要开启core-js相关API转换功能的时候，我们只需要安装@babel/runtime就可以了。**上一节我们已经知道，@babel/runtime里存放的是Babel做语法转换的辅助函数。

在我们需要开启core-js相关API转换功能的时候，就需要安装@babel/runtime的进化版@babel/runtime-corejs3。这个npm包里除了包含Babel做语法转换的辅助函数，也包含了core-js的API转换函数。

除了这两个包，还有一个@babel/runtime-corejs2的包。它和@babel/runtime-corejs3的功能是一样的，只是里面的函数是针对core-js2版本的。

二，@babel/plugin-transform-runtime的基本配置

// 是上方的默认值

{

"plugins": [

[

"@babel/plugin-transform-runtime",

{

"helpers": true,

"corejs": false,

"regenerator": true,

"useESModules": false,

"absoluteRuntime": false,

"version": "7.0.0-beta.0"

}

]

]

}

配置项讲解

1.我们先看第一个配置项helpers

该项是用来设置是否要自动引入辅助函数包，这个我们当然要引入了，这是@babel/plugin-transform-runtime的核心用途。该项取值是布尔值，我们设置为true，其默认值也是true，所以也可以省略不填。

2.接着来看corejs和regenerator

这两项是用来设置是否做API转换以避免污染全局环境，regenerator取值是布尔值，corejs取值是false、2和3。这个上一节已经讲过了，在前端业务项目里，我们一般对corejs取false，即不对Promise这一类的API进行转换。而在开发JS库的时候设置为2或3。regenerator取默认的true就可以

3.useESModules

该项用来设置是否使用ES6的模块化用法，取值是布尔值。默认是fasle，在用webpack一类的打包工具的时候，我们可以设置为true，以便做静态分析。

4.absoluteRuntime

该项用来自定义@babel/plugin-transform-runtime引入@babel/runtime/模块的路径规则，取值是布尔值或字符串。没有特殊需求，我们不需要修改，保持默认false即可。

5.最后一项version

该项主要是和@babel/runtime及其进化版@babel/runtime-corejs2、@babel/runtime-corejs3的版本号有关系，这三个包我们只需要根据需要安装一个。我们把安装的npm包的版本号设置给version即可。例如，在上节的babel14例子里，安装的@babel/runtime-corejs3版本是7.10.4，那么配置项version也取’7.10.4’。 其实该项不填取默认值就行，目前填写版本号主要是可以减少打包体积。

另外，在Babel6版本，该插件还有两个配置选项polyfill和useBuiltIns，在v7版本已经移除了，大家不需要再使用。

注，本文很大部分参考这位大佬的笔记，写的很好： https://www.jiangruitao.com/babel/transform-runtime3/

相关文章