babel-runtime 与preset-env的polyfill 不能同时使用
来源:10-24 babel-runtime 是什么?

Charles_So_网页开发
2020-10-25
在 10-22 小节视频 5分57秒中 ,在老师的babel-runtime 演示,babelrc plugins 中的 "@babel/plugin-transform-runtime"的配置与 preset-env的useBuiltIns 同时共存。
演示代码如下:(同时启用了babel-runtime的polyfill 与 preset-env的polyfill)
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage", //开启presset-env,polyfill污染全局变量
"corejs": 3
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime", //babel-runtime,不污染全局变量
{
"absoluteRuntime": false,
"corejs": 3,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
这种使用方式是否正确?
我参考了一篇文章:点击链接,点击左侧文章目录【注意事项】,有一小节提到:
出现:preset-env的polyfill与transform-runtime的polyfill并存的现象。
这样的转码结果肯定是有问题的,这两个属于不同的polyfill做法,有不同的应用场景。 所以这两种polyfill不能同时启用。在开发应用时,应该通过下面的方式关闭掉transform-runtime对core-js和regenerator的polyfill
意思大概是,babel-runtime的polyfill 与 preset-env的polyfill不应该共存,因为前者runtime可以不污染全局变量,但后者preset-env是污染全局变量,所以这两者是冲突的。
所以开启babel-runtime的时候,应该给babel-runtime开启core-js选项,应该把preset-env的polyfill关闭,设置useBuildIns为false,这样才能在不污染全局变量的情况下给代码提供polyfill解决方案。
代码如下:
const presets = [
[
"@babel/preset-env",
{
useBuiltIns: false //这样才能不污染全局变量
}
]
];
const plugins = [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3 //通过配置transform-runtime的corejsoption,启用了对core-js的polyfill)
}
]
];
module.exports = { presets, plugins };
想请教一下老师,对于这个babel-runtime与preset-env的使用方法,到底怎么看?
1回答
-
双越
2020-10-26
说的有道理。不过,这要让结果说话。
你可以弄一个 demo ,分别用两种方式进行编译,看一看结果是否如你描述的预期?
还是要亲自试一试的
032020-10-26
相似问题
回答 1