webpack打包时ES6导出和CommonJS导出混用的一些报错问题总结

就在今天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

COPY

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

COPY

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