就在今天2021-8-27,我用 webpack 打包的时候遇到了几个问题

第一个问题:ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: xxxxx

第二个问题:regeneratorRuntime is not defined

解决第一个问题:ES6 导出和 CommonJS 导出不能混用,用了就会报如上方的错误信息
这个问题其实是在打包的 时候经过bablejs处理过程中产生的问题,修改bable.config.js(这里我用的是js文件配置,其他自己处理)配置文件下添加sourceType:unambiguous
关于 sourceType 的一些详细内容,可以参考官方解释: https://babeljs.io/docs/en/options#sourcetype

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
browsers: ["last 2 versions"], // 最近 2 个版本的浏览器
},
},
],
],
sourceType: "unambiguous", // 解决ES6和CommonJS模块导出的问题: https://babeljs.io/docs/en/options#sourcetype
};

解决第二个问题:在打包的文件中使用了高级的es6语法,但是webpack并没有帮我们去进行校验
需要安装npm i babel-plugin-transform-runtime -D
修改bable.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
browsers: ['last 2 versions'] // 最近 2 个版本的浏览器
}
}
]
],
plugins: ['@babel/plugin-transform-runtime'], // 解决 regeneratorRuntime is not defined 错误信息
sourceType: 'unambiguous' // 解决ES6和CommonJS模块导出的问题: https://babeljs.io/docs/en/options#sourcetype
}

如果你也有一些问题想要和我分享,欢迎在评论区留言OωO