CommonJS 与 ES6 Module 的区别

• 出处 《Webpack实战 - 入门、进阶与调优》第2章 模块打包

动态与静态

• CommonJS 模块依赖关系的建立发生在代码运行阶段,
• CommonJS模块的导入、导出发生在代码的运行阶段 (动态)
• ES6 Module 模块依赖关系的建立发生在代码编译阶段,ES6 不支持导入的路径是一个表达式.(静态)

ES6的主要优势 P27

1. 死代码检测和排除 (通过静态分析可以在打包时去掉未曾使用过的模块，以减小打包资源体积)
2. 模块变量类型检查
3. 编译器优化 (导出的值可以是一个简单的变量,减少了引用层级,程序效率更高)

值拷贝与动态映射 P29

1. CommonJS导入一个模块时,获取的是一份导出值的拷贝.
2. ES6 Module中则是值的动态映射,并且这个映射是只读的.

  <script type='module'>
        import { count, add }  from './1.js' // let count = 0;
        count = count + 1; // 直接报错 因为是只读的
        console.log(count, add);
    </script>

循环依赖

1. 模块A依赖于模块B,同时模块B依赖于模块A.这就叫循环依赖
2. 在CommonJS 中,若遇到循环依赖则没有办法得到预想中的结果.
3. 用ES6的export导出数据接口的时候， 最好统一用函数， 避免在循环依赖的时候， 因为JS会把不同类型的对象静态解析成不同的初始值;

总结

1. ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
2. 可以借助 Babel 相关插件(plugin-transform-modules-commonjs, babel-plugin-transform-commonjs)实现 CommonJS 和 ES Modules 间的相互转换。