报错Cannot assign to read only property 'exports' of object 的原因分析和解决方法

问题描述

在运行项目的时候发现以下报错：

原因分析

webpack打包的时候可以在js文件中混用require和export但是不能混用import和module.exports

解决方法

1.统一修改成ES6的写法

2.在babel.config.js里配置unambiguous设置，让babel和webpack一样严格区分commonJS文件和ES6文件（个别打包后会造成引入的组件丢失，不那么推荐）

module.exports = {
  presets: [
    '@vue/app'
  ],
  sourceType: 'unambiguous'
}

3.使用插件“@babel/plugin-transform-modules-commonjs”

安装:

npm install --save-dev @babel/plugin-transform-modules-commonjs

在.babelrc文件中引入：

{
  "plugins": ["@babel/plugin-transform-modules-commonjs"]
} 

文档参考：babel.nodejs.cn/docs/babel-…

关于JS导入导出方式：module.exports、exports和export、export default以及require和import的介绍和区别也写了一片文章记录，感兴趣的话可以跳转浏览：juejin.cn/post/740736…

个人记录以供学习翻看，如有表述不当，请多多指出，如有帮助，也可以点赞收藏，感谢支持~