vue报错Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
前言:在研究electron的时候,扒拉人家大神的源码,出现的这个问题,出现这个问题之后找了很多资料,最终也是解决了这个问题,整理下方法:资料:国外有一个大神对此分析的很清楚,他把原因分成以下两类:翻译,第一种原因就是import和module.exports的混用要知道commonJS和ES6的语法是不太一样的前者是require和module.exports后者则是import和exports
·
前言:
在研究electron的时候,扒拉人家大神的源码,出现的这个问题,出现这个问题之后找了很多资料,最终也是解决了这个问题,整理下方法:
资料:
国外有一个大神对此分析的很清楚,他把原因分成以下两类:
翻译,
第一种原因就是import和module.exports的混用要知道commonJS和ES6的语法是不太一样的前者是require和module.exports后者则是import和exports,当你混用这两个语法的时候,webpack就会报错,也就是第一种情况。
为了使编译好的程序能在大多数浏览器下运行。webpack里面有一个编译器叫Babel,负责把ES6的语言转化为commonJS以兼容绝大多数浏览器。当你混用这两个语法的时候你可以使用babel的commonJS模式帮你把import编译成require。
然而第二种情况就是你要使用@babel/plugin-transform-runtime这个插件的时候,同时你又在某个commonJS写的文件里使用这个插件时,babel会默认你这个文件是ES6的文件,然后就使用import导入了这个插件,从而产生了和第一种情况一样的混用错误。解决方法是在babel.config.js里配置unambiguous设置,让babel和webpack一样严格区分commonJS文件和ES6文件。
module.exports = {
presets: [
'@vue/app'
],
sourceType: 'unambiguous'
}
实际使用方法:
我使用了第二种方法,也就是在babel.config.js里面加 sourceType: 'unambiguous',
除此之外,我还把他源码里面的方法,es5的部分都改成es6了,问题解决
希望对你有帮助!结束了
更多推荐
已为社区贡献102条内容
所有评论(0)