这几天在封装组件，使用require的时候遇到了一个诡异的bug。 ``` Cannot assign to read only property 'exports' of object '#<Object>' ``` 截图如下：  <br/> 我的引入和导出是这样的： ``` 导出： 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规范就行了。所以既然知道了问题所在，接下来就是解决方法了： <br/> **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篇总结博客： <br/> 了解import和require：[https://www.tuicool.com/articles/uuUVBv2](https://www.tuicool.com/articles/uuUVBv2) import和require区别：[https://www.jianshu.com/p/f1e54dde30c8](https://www.jianshu.com/p/f1e54dde30c8)