webpack-babel-实现低版本语法注意点

直接在文件中导入 ​​polyfill​​​ 模块的弊端, 直接导入 ​​polyfill​​​ 的方式只适用于一般项目开发, 但是如果是在编写一些第三方模块的时候这种方式会出现一些问题，因为这种方式是通过全局变量的方式来注入代码, 会污染全局环境. 所以我们再来看一下 ​​polyfill​​ 的第二种配置方式

第二种配置方式

官方文档：​​https://babeljs.io/docs/en/babel-plugin-transform-runtime​​

安装相关模块

npm install --save @babel/polyfill

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

配置相关信息

"plugins": [
    [
        "@babel/plugin-transform-runtime",
        {
            "absoluteRuntime": false,
            "corejs": 2,
            "helpers": true,
            "regenerator": true,
            "useESModules": false
        }
    ]
]

注意点

• ​​"corejs": false​​, 还是全局注入, 还是会污染全局环境
• ​​"corejs": 2​​, 则不会污染全局环境

如果你将 corejs 改为 2 的时候在进行打包的时候会报错：

其实这个错误在官方文档当中已经声明了，就是说你改为 ​​2​​ 之后还需要安装一下插件才可以进行打包如下图：

npm install --save @babel/runtime-corejs2

利用 webpack 分别进行打包测试，首先来看看 corejs 改为 false 的情况下打包之后的结果是什么样子的：

"corejs": 2 转换后：