import和require语法的报错解决

这几天在封装组件，使用require的时候遇到了一个诡异的bug。

Cannot assign to read only property 'exports' of object '#<Object>'

截图如下：

我的引入和导出是这样的：

导出： module.exports = Test
引入： const Test = require("./Test")

然后百度了一下，百度到的博客清一色的说是因为语法混用了，import和module.exports是不能出现在用一个文件里面的。然而我可以确定自己是没有混用语法的，为了保险起见，我检查了三遍文件，全局搜索搜了几次，确保自己确实没有混用语法后，我陷入了沉思。
控制台没有报错信息，只有浏览器飘红，项目始终打不开，之前还用的好好的语法现在突然在报错。不过所幸报错信息还是给了错误定位，告诉我是哪个组件有问题，既然引入和导出的语法暂时没想出问题在哪里，那只能一行一行代码去找，继续精准定位了。
最后我终于发现问题代码出在哪里：

async onTest (data) {
    ......
    await axios.get(url).then(res=>{

    })
    ......
}

没错，就是因为这个同步方法！！！只要把这个方法一注释，那就啥问题都没有了。然而这是为什么！我又寻求了一下百度可是没找到结果。据我自己不靠谱猜测，应该是导出方式的问题。async是ES2017引入的标准，而module.exports是CommonJS规范，大概就是不搭吧。只要把导出方式换成我们熟悉的ECMAScript规范就行了。所以既然知道了问题所在，接下来就是解决方法了：

1、看看同步请求的代码能不能替换掉，如果可以，方法前面去掉async，换成普通的异步请求就行了。
2、在核心代码不能变更的情况下，或者变更成本太大，我们可以换一下导出方式(和引入方式)

导出： export  default Test          // ES6规范
引入： import Test from “./Test”

或者

导出： export  { Test }              // ES6规范
引入： const {Test} = require("./Test")      // 也能用import引入

这样就解决了这个诡异的bug了。反正经过这几天import和require的折磨，我个人的建议是尽量用ES6的导入导出方式吧。关于import和require，再推荐2篇总结博客：

了解import和require：https://www.tuicool.com/articles/uuUVBv2
import和require区别：https://www.jianshu.com/p/f1e54dde30c8