CommonJs模块和ES6模块的区别

来源：http://www.cnblogs.com/weblinda/p/6740833.html

es6 {

　　export   :      '可以输出多个，输出方式为 {}' ，

　　export  default : ' 只能输出一个 ，可以与export 同时输出，但是不建议这么做'，

　　解析阶段确定对外输出的接口，解析阶段生成接口，

　　模块不是对象，加载的不是对象，

　　可以单独加载其中的某个接口（方法），

　　静态分析，动态引用，输出的是值的引用，值改变，引用也改变，即原来模块中的值改变则该加载的值也改变，

　　this 指向undefined

}

commonJS {

　　module.exports =  ...   :      '只能输出一个，且后面的会覆盖上面的' ，

　　exports. ...  : ' 可以输出多个'，

　　运行阶段确定接口，运行时才会加载模块，

　　模块是对象，加载的是该对象，

　　加载的是整个模块，即将所有的接口全部加载进来，

　　输出是值的拷贝，即原来模块中的值改变不会影响已经加载的该值，

　　this 指向当前模块

}

 

以下来源阮一峰老师ES6入门：

ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

// CommonJS模块
let { stat, exists, readFile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取3个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

// ES6模块
import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。

由于 ES6 模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。

除了静态加载带来的各种好处，ES6 模块还有以下好处。

• 不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。

• 将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性。

• 不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供。