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 ,分别用两种方式进行编译,看一看结果是否如你描述的预期?

还是要亲自试一试的

0
3
Charles_So_网页开发
回复
双越
https://e.coding.net/sokawai/my-babel-demo/my-babel-demo.git
2020-10-26
共3条回复

前端框架及项目面试 聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4695 学习 · 1667 问题

查看课程