AMD/CMD/ ES6模块/CommonJS模块

在前端开发中，发现小组成员总是对ES6、Javascript、CommonJS、AMD、nodejs概念搞不清，既不知道它们之间的联系，更不知道它们之间的差异。

理清它们的关系很简单，首先要从最核心的说起，也就是Javascript，javascript是一种脚本编程语言，有自己独立的语法与语义，没有javascript，也就没有其他的那些概念了。

关于ES6，可直接理解为javascript的增强版(增加了新的规范、特性与功能)或最新版，两者之间虽然略有差异，但也可以忽略（不要在意这些细节，呵呵）,就有点类似于JAVA8与JAVA语言的关系，同样既然有ES6，那么也还有ES 5与ES 3，都是Javascript在发展过程中的发布版本。

Commonjs、AMD以及曾经很火的CMD都只是为了解决javascript文件之间的依赖与引用问题，所以它们只是一种Javascript的包管理规范。在组织你的JS代码时，你完全可以根据自己的喜好，选择合适的包管理规范，但要注意，尽可能只选择一种。

在nodejs出现之前，javascript主要应用于浏览器端，所以nodejs也很好理解了，nodejs是对javascript脱离浏览器的应用延展，它还提供了运行引擎与相关API，所以nodejs是javascript开发本地应用、服务器应用的一个开发套件，注意了，因为nodejs采用了javascript的语法，所以nodejs不是一种开发语言。
AMD

CMD

 

1、commonjs模块是拷贝，es6模块是引用

es6模块是引用，且只存在只读状态，不能修改其变量值（说的更准确点，不能修改其变量的指针指向，但可以改变内部指针指向，在复杂数据类型的模块会讲解）；commonjs是拷贝，且能修改其值（者就叫修改指针指向），至于是深拷贝还浅拷贝，也会在在复杂数据类型的模块会讲解。

2、ES6 模块化

import命令用于输入其他模块提供的功能;export命令用于规定模块的对外接口。

export 可以有多个，export default 仅有一个

CommonJS 模块化

 require 与 module.exports

总结：

es6模块的特点：

1. 静态化，必须在顶部，不能使用条件语句，自动采用严格模式
2. treeshaking和编译优化，以及webpack3中的作用域提升
3. 外部可以拿到实时值，而非缓存值(是引用而不是copy)

es6模块和commonjs模块的区别：

1. 可以对commonjs模块重新赋值，对es6模块重新赋值会编译报错
2. commonjs是对模块的拷贝（浅拷贝），es6是对模块的引用（也就是说，es6模块只存只读，不能改变其值，具体点就是指针指向不能变，类似const）

es6模块和commonjs模块的相同点：

1. 两者都可以对对象内部属性的值进行改变

• 即使我们使用了 ES6 的模块系统，如果借助 Babel 的转换，ES6 的模块系统最终还是会转换成 CommonJS 的规范。
• Babel5 中使用 require 时，引入值是 module.export 返回的值或者是 export default 返回的值。
• Babel6中，使用 import 引入时，可以直接获取到 export default 的值 ； 但是如果是 require 导入的组件， 无论导出是 module.export 、export 、 export default可以直接获取到 export default 的值都必须要加上一个 default。