Cannot assign to read only property 'exports' of object 报错

Cannot assign to read only property ‘exports’ of object '#< Object>'报错

原因：

在 webpack 中不允许混用 import 和 module.exports

有时候我们vue的项目，每个页面会有这样的目录结构：

会有一个index.js文件用来导出该页面：

这里面就会有 module.exports，当我们用webpack打包时，这两种就会混用而报错

解决：

1. 改成用import和export default配合来使用

2. 在 babel.config.js 文件加入以下配置：

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

此配置可以让babel和webpack一样严格区分commonJS文件和ES6文件

原理：

首先要了解 require 和 import 的区别：

1. 遵循规范：
   require / exports 是CommonJS的一部分；
   import / export 是ES6的新规范，如果要兼容浏览器的话必须转化成es5的语法；

2. 调用时间：
   require 是运行时调用，所以require理论上可以运用在代码的任何地方;
   import 是编译时调用，所以必须放在文件开头

3. 本质：
   require 是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量；
   import 是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require；

4. babel的 sourceType 的作用：
   sourceType: 表明代码应该解析的模式。
   可以是 “script”，“module” 或者 “unambiguous” 中任意一个。
   默认为 “script”。
   “unambiguous” 将使得 Babylon 尝试根据 ES6 的 import 或者 export 声明来进行推测。
   具有 ES6 import 和 export 的文件被认为是 “module”，否则被认为是 “script”。
   官方解释