踩坑小记录7.24（解决报错Cannot assign to read only property'exports' of object '#'..）

问题场景(vue+typeScript+Webpack)

由于项目需要，需要引入第三方依赖。
引入项目后跑起来发现页面上报错

经过检查，安装依赖及引入的过程并没有问题，组件本身应该也没有问题，在查了百度之后发现问题出现在打包过程。遂寻求方法并使问题得以解决，组件也可以正常使用。

产生原因

由于ES6和commonJs在语法上存在一定区别，比如引入模块，ES6是import而commonJs是require， 这两种在webpack中都可以识别，但是webpack2不允许混用（比如你依赖是commonjs的方式导出，项目引入却用了ES6的写法引入），混用则会出现上面的报错。这种问题在用vue+ts构建的项目中还是很常见的。

解决方案

1、找到报错的依赖文件，统一使用ES6写法

require('../xx')=> import xx from '../xx'
module.exports={...}  => export 

但是这么写有一个弊端，在实际工作的过程中为了提高开发效率经常.gitignore都会把node_modules包忽略掉，这样导致你就算把他改了，别人拉下来问题还是没有解决。所以这种方法不推荐

2、babel config 找到你项目的config文件(.barberlc or something else)

module.exports={
    presets=[
    '@vue/app'
    ],
    sourceType: 'unambiguous' // 添加这一行
}

sourceType（源类型）: 接受三个参数
module:在严格模式下解析并且允许模块定义，简单地说就是能识别import/export(ES6)
script:不能识别模块定义，也就是只能识别module.exports/require (commonJs)
unambiguous:这个就比较暴力了，遇到import/export就识别成ES6，遇到module.exports/require就识别成commonJS 本人亲测可以解决问题

3、添加babel插件 @babel/plugin-transform-modules-commonjs
本人暂未测试

<踩坑待续。。。>

---

一个刚毕业入行1个月的小白，对问题的解决和理解也都很粗浅，望各路大佬批评指正
peace && love