Javascript模块化编程
模块的写法
随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。
Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。
但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了。（正在制定中的ECMAScript标准第六版，将正式支持"类"和"模块"，但还需要很长时间才能投入实用。）
一、原始写法
模块就是实现特定功能的一组方法。
只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。
function m1(){
//...
}
function m2(){
//...
}
上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。
这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。
二、对象写法
为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。
var module1 = new Object({
_count : 0,
m1 : function (){
//...
},
m2 : function (){
//...
}
});
上面的函数m1()和m2(），都封装在module1对象里。使用的时候，就是调用这个对象的属性。
module1.m1();
但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。
module1._count = 5;
三、立即执行函数写法
使用"立即执行函数"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的。
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
使用上面的写法，外部代码无法读取内部的_count变量。
console.info(module1._count); //undefined
module1就是Javascript模块的基本写法。下面，再对这种写法进行加工。
四、放大模式
如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。
var module1 = (function (mod){
mod.m3 = function () {
//...
};
return mod;
})(module1);
上面的代码为module1模块添加了一个新方法m3()，然后返回新的module1模块。
五、宽放大模式（Loose augmentation）
在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。
var module1 = ( function (mod){
//...
return mod;
})(window.module1 || {});
与"放大模式"相比，＂宽放大模式＂就是"立即执行函数"的参数可以是空对象。
六、输入全局变量
独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。
为了在模块内部调用全局变量，必须显式地将其他变量输入模块。
var module1 = (function ($, YAHOO) {
//...
})(jQuery, YAHOO);
上面的module1模块需要使用jQuery库和YUI库，就把这两个库（其实是两个模块）当作参数输入module1。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。这方面更多的讨论，参见Ben Cherry的著名文章《JavaScript Module Pattern: In-Depth》。
这个系列的第二部分，将讨论如何在浏览器环境组织不同的模块、管理模块之间的依赖性。
模块的规范
先想一想，为什么模块很重要？
因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。
但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！考虑到Javascript模块现在还没有官方规范，这一点就更重要了。
目前，通行的Javascript模块规范共有两种：CommonJS和AMD。
CommonJS
2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。
这标志"Javascript模块化编程"正式诞生。因为老实说，在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；但是在服务器端，一定要有模块，与操作系统和其他应用程序互动，否则根本没法编程。
node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。
var math = require('math');
然后，就可以调用模块提供的方法：
var math = require('math');
math.add(2,3); // 5
因为这个系列主要针对浏览器编程，不涉及node.js，所以对CommonJS就不多做介绍了。我们在这里只要知道，require()用于加载模块就行了。
浏览器环境
有了服务器端模块以后，很自然地，大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行。
但是，由于一个重大的局限，使得CommonJS规范不适用于浏览器环境。还是上一节的代码，如果在浏览器中运行，会有一个很大的问题，你能看出来吗？
第二行math.add(2, 3)，在第一行require('math')之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。
这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。
因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。
AMD
AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：
require([module], callback);
第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：
require(['math'], function (math) {
math.add(2, 3);
});
其中，回调函数中参数对应数组中的成员（模块）。math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。
目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。
requireJS加载模块，采用的是AMD规范。也就是说，模块必须按照AMD规定的方式来写。
具体来说，就是模块书写必须使用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接写在define()函数之中。
define(id?, dependencies?, factory);
id：模块的名字，如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字；
dependencies：模块的依赖，已被模块定义的模块标识的数组字面量。依赖参数是可选的，如果忽略此参数，它应该默认为
["require", "exports", "module"]。然而，如果工厂方法的长度属性小于3，加载器会选择以函数的长度属性指定的参数个数调用工厂方法。factory：模块的工厂函数，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。
CMD
CMD推崇依赖就近，延迟执行。可以把你的依赖写进代码的任意一行，如下：
define(factory)
factory为函数时，表示是模块的构造方法。执行该构造方法，可以得到模块向外提供的接口。factory 方法在执行时，默认会传入三个参数：require、exports 和 module.
// CMD
define(function(require, exports, module) {
var a = require('./a');
a.doSomething();
var b = require('./b');
b.doSomething();
})
如果使用AMD写法，如下：
// AMD
define(['a', 'b'], function(a, b) {
a.doSomething();
b.doSomething();
})
这个规范实际上是为了Seajs的推广然后搞出来的。那么看看SeaJS是怎么回事儿吧，基本就是知道这个规范了。
同样Seajs也是预加载依赖js跟AMD的规范在预加载这一点上是相同的，明显不同的地方是调用，和声明依赖的地方。AMD和CMD都是用difine和require，但是CMD标准倾向于在使用过程中提出依赖，就是不管代码写到哪突然发现需要依赖另一个模块，那就在当前代码用require引入就可以了，规范会帮你搞定预加载，你随便写就可以了。但是AMD标准让你必须提前在头部依赖参数部分写好（没有写好？ 倒回去写好咯）。这就是最明显的区别。
sea.js通过sea.use()来加载模块。
seajs.use(id, callback?)
UMD
由于CommonJS是服务器端的规范，跟AMD、CMD两个标准实际不冲突。
当我们写一个文件需要兼容不同的加载规范的时候怎么办呢，看看下面的代码。
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery', 'underscore'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS之类的
module.exports = factory(require('jquery'), require('underscore'));
} else {
// 浏览器全局变量(root 即 window)
root.returnExports = factory(root.jQuery, root._);
}
}(this, function ($, _) {
// 方法
function a(){}; // 私有方法，因为它没被返回 (见下面)
function b(){}; // 公共方法，因为被返回了
function c(){}; // 公共方法，因为被返回了
// 暴露公共方法
return {
b: b,
c: c
}
}));
这个代码可以兼容各种加载规范了。
ES6
es6通过import、export实现模块的输入输出。其中import命令用于输入其他模块提供的功能，export命令用于规定模块的对外接口。
export
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果希望外部文件能够读取该模块的变量，就需要在这个模块内使用export关键字导出变量。如：
// profile.js
export var a = 1;
export var b = 2;
export var c = 3;
下面的写法是等价的，这种方式更加清晰（在底部一眼能看出导出了哪些变量）：
var a = 1;
var b = 2;
var c = 3;
export {a, b, c}
export命令除了输出变量，还可以导出函数或类。
- 导出函数
export function foo(){}
function foo(){}
function bar(){}
export {foo, bar as bar2}
其中上面的as表示给导出的变量重命名。
要注意的是，export导出的变量只能位于文件的顶层，如果处于块级作用域内，会报错。如：
function foo() {
export 'bar'; // SyntaxError
}
- 导出类
export default class {} // 关于default下面会说
export语句输出的值是动态绑定，绑定其所在的模块。
// foo.js
export var foo = 'foo';
setTimeout(function() {
foo = 'foo2';
}, 500);
// main.js
import * as m from './foo';
console.log(m.foo); // foo
setTimeout(() => console.log(m.foo), 500); // foo2
import
import命令可以导入其他模块通过export导出的部分。
// abc.js
var a = 1;
var b = 2;
var c = 3;
export {a, b, c}
//main.js
import {a, b, c} from './abc';
console.log(a, b, c);
如果想为导入的变量重新取一个名字，使用as关键字（也可以在导出中使用）。
import {a as aa, b, c};
console.log(aa, b, c)
如果想在一个模块中先输入后输出一个模块，import语句可以和export语句写在一起。
import {a, b, c} form './abc';
export {a, b, c}
// 使用连写, 可读性不好，不建议
export {a, b, c} from './abc';
模块的整体加载
使用*关键字。
// abc.js
export var a = 1;
export var b = 2;
export var c = 3;
// main.js
import * from as abc form './abc';
console.log(abc.a, abc.b, abc.c);
export default
在export输出内容时，如果同时输出多个变量，需要使用大括号{}，同时导入也需要大括号。使用export defalut输出时，不需要大括号，而输入（import）export default输出的变量时，不需要大括号。
// abc.js
var a = 1, b = 2, c = 3;
export {a, b};
export default c;
import {a, b} from './abc';
import c from './abc'; // 不需要大括号
console.log(a, b, c) // 1 2 3
本质上，export default输出的是一个叫做default的变量或方法，输入这个default变量时不需要大括号。
// abc.js
export {a as default};
// main.js
import a from './abc'; // 这样也是可以的
// 这样也是可以的
import {default as aa} from './abc';
console.log(aa);
循环加载
“循环加载”（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。
// a.js
var b = require('b');
// b.js
var a = require('a');
通常，“循环加载”表示存在强耦合，如果处理不好，还可能导致递归加载，使得程序无法执行，因此应该避免出现这种现象。
但是实际上，这是很难避免的，尤其是依赖关系复杂的大项目中很容易出现a依赖b，b依赖c，c又依赖a这样的情况。这意味着，模块加载机制必须考虑“循环加载”的情况。
对于JavaScript语言来说，目前最常见的两种模块格式CommonJS和ES6在处理“循环加载”时的方法是不一样的，返回的结果也不一样。
CommonJS模块的加载原理
介绍ES6如何处理“循环加载”之前，先介绍目前最流行的CommonJS模块格式的加载原理。
CommonJS的一个模块就是一个脚本文件。require命令第一次加载该脚本时就会执行整个脚本，然后在内存中生成一个对象。
{
id: '...',
exports: { ... },
loaded: true,
...
}
上面的代码就是Node内部加载模块后生成的一个对象。该对象的id属性是模块名，exports属性是模块输出的各个接口，loaded属性是一个布尔值，表示该模块的脚本是否执行完毕。其他还有很多属性，这里都省略了。
以后需要用到这个模块时就会到exports属性上面取值。即使再次执行require命令，也不会再次执行该模块，而是到缓存之中取值。也就是说，CommonJS模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载时就返回第一次运行的结果，除非手动清除系统缓存。
CommonJS模块的循环加载
CommonJS模块的重要特性是加载时执行，即脚本代码在require的时候就会全部执行。一旦出现某个模块被“循环加载”，就只输出已经执行的部分，还未执行的部分不会输出。
让我们来看一下Node官方文档（nodejs.org/api/modules.html#modules_cycles）里面的例子。脚本文件a.js代码如下。
exports.done = false;
var b = require('./b.js');
console.log('在 a.js 之中，b.done = %j', b.done);
exports.done = true;
console.log('a.js 执行完毕');
上面的代码之中，a.js脚本先输出一个done变量，然后加载另一个脚本文件b.js。注意，此时a.js代码就停在这里，等待b.js执行完毕再往下执行。
再看b.js的代码。
exports.done = false;
var a = require('./a.js');
console.log('在 b.js 之中，a.done = %j', a.done);
exports.done = true;
console.log('b.js 执行完毕');
上面的代码中，b.js执行到第二行就会加载a.js，这时就发生了“循环加载”，系统会去a.js模块对应对象的exports属性中取值，可是因为a.js还没有执行完，因此从exports属性中只能取回已经执行的部分，而不是最后的值。
a.js已经执行的部分只有以下一行。
exports.done = false;
因此，对于b.js来说，它从a.js只输入一个变量done，值为false。
然后，b.js接着执行，等到全部执行完毕，再把执行权交还给a.js。于是，a.js接着执行，直到执行完毕。下面，我们来写一个脚本main.js验证这个过程。
var a = require('./a.js');
var b = require('./b.js');
console.log('在 main.js 之中, a.done=%j, b.done=%j', a.done, b.done);
执行main.js，运行结果如下。
$ node main.js
在 b.js 之中，a.done = false
b.js 执行完毕
在 a.js 之中，b.done = true
a.js 执行完毕
在 main.js 之中, a.done=true, b.done=true
上面的代码证明了两件事。第一，在b.js之中，a.js没有执行完毕，只执行了第一行。第二，reimain.js执行到第二行时不会再次执行b.js，而是输出缓存的b.js的执行结果，即它的第四行。
exports.done = true;
总之，CommonJS输入的是被输出值的复制，而不是引用。
另外，由于CommonJS模块遇到循环加载时返回的是当前已经执行的部分的值，而不是代码全部执行后的值，两者可能会有差异。所以，输入变量的时候必须非常小心。
var a = require('a'); // 安全的写法
var foo = require('a').foo; // 危险的写法
exports.good = function (arg) {
return a.foo('good', arg); // 使用的是a.foo的最新值
};
exports.bad = function (arg) {
return foo('bad', arg); // 使用的是一个部分加载时的值
};
上面的代码中，如果发生循环加载，require(‘a’).foo的值很可能会被改写，改用require(‘a’)会更保险一点。
ES6模块的循环加载
ES6处理“循环加载”与CommonJS有本质的不同。ES6模块是动态引用，如果使用import从一个模块中加载变量（即import foo from ‘foo’），那么，变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者保证在真正取值的时候能够取到值。
请看下面这个例子。
// a.js如下
import {bar} from './b.js';
console.log('a.js');
console.log(bar);
export let foo = 'foo';
// b.js
import {foo} from './a.js';
console.log('b.js');
console.log(foo);
export let bar = 'bar';
上面的代码中，a.js加载b.js，b.js又加载a.js，构成循环加载。执行a.js，结果如下。
$ babel-node a.js
b.js
undefined
a.js
Bar
上面的代码中，由于a.js的第一行是加载b.js，所以先执行的是b.js。而b.js的第一行又是加载a.js，这时由于a.js已经开始执行，所以不会重复执行，而是继续执行b.js，因此第一行输出的是b.js。
接着，b.js要打印变量foo，这时a.js还没有执行完，取不到foo的值，因此打印出来的是undefined。b.js执行完便会开始执行a.js，这时便会一切正常。
再来看一个稍微复杂的例子（摘自 Axel Rauschmayer 的Exploring ES6，具体内容请查看exploringjs.com/es6/ch_modules.html）。
// a.js
import {bar} from './b.js';
export function foo() {
console.log('foo');
bar();
console.log('执行完毕');
}
foo();
// b.js
import {foo} from './a.js';
export function bar() {
console.log('bar');
if (Math.random() > 0.5) {
foo();
}
}
按照CommonJS规范，上面的代码是无法执行的。a先加载b，然后b又加载a，这时a还没有任何执行结果，所以输出结果为null，即对于b.js来说，变量foo的值等于null，后面的foo()就会报错。
但是，ES6可以执行上面的代码。
$ babel-node a.js
foo
bar
执行完毕
// 执行结果也有可能是
foo
bar
foo
bar
执行完毕
执行完毕
上面的代码中，a.js之所以能够执行，原因就在于ES6加载的变量都是动态引用其所在模块的。只要引用存在，代码就能执行。
下面，我们来详细分析这段代码的运行过程。
// a.js
// 这一行建立一个引用，
// 从`b.js`引用`bar`
import {bar} from './b.js';
export function foo() {
// 执行时第一行输出foo
console.log('foo');
// 到 b.js 执行 bar
bar();
console.log('执行完毕');
}
foo();
// b.js
// 建立`a.js`的`foo`引用
import {foo} from './a.js';
export function bar() {
// 执行时，第二行输出bar
console.log('bar');
// 递归执行foo，一旦随机数
// 小于等于0.5，就停止执行
if (Math.random() > 0.5) {
foo();
}
}
再来看ES6模块加载器SystemJS（github.com/ModuleLoader/es6-module-loader/blob/master/ docs/circular-references-bindings.md）给出的一个例子。
// even.js
import { odd } from './odd'
export var counter = 0;
export function even(n) {
counter++;
return n == 0 || odd(n - 1);
}
// odd.js
import { even } from './even';
export function odd(n) {
return n != 0 && even(n - 1);
}
上面的代码中，even.js里面的函数even有一个参数n，只要该参数不等于0，结果就会减1，传入加载的odd()。odd.js也会进行类似操作。
运行上面这段代码，结果如下。
$ babel-node
> import * as m from './even.js';
> m.even(10);
true
> m.counter
6
> m.even(20)
true
> m.counter
17
上面的代码中，参数n从10变为0的过程中，even()一共会执行6次，所以变量counter等于6。第二次调用even()时，参数n从20变为0，even()一共会执行11次，加上前面的6次，所以变量counter等于17。
这个例子要是改写成CommonJS，则会报错，根本无法执行。
// even.js
var odd = require('./odd');
var counter = 0;
exports.counter = counter;
exports.even = function(n) {
counter++;
return n == 0 || odd(n - 1);
}
// odd.js
var even = require('./even').even;
module.exports = function(n) {
return n != 0 && even(n - 1);
}
上面的代码中，even.js加载odd.js，而odd.js又加载even.js，形成“循环加载”。这时，执行引擎就会输出even.js已经执行的部分（不存在任何结果），所以在odd.js之中，变量even等于null，后面再调用even(n-1)就会报错。
$ node
> var m = require('./even');
> m.even(10)
TypeError: even is not a function
ES6模块的转码
浏览器目前还不支持ES6模块，为了实现立刻使用，我们可以将其转为ES5的写法。除了Babel可以用来转码，还有以下两个方法也可以用来转码。
ES6 module transpiler
ES6 module transpiler（github.com/esnext/es6-module-transpiler）是square公司开源的一个转码器，可以将ES6模块转为CommonJS模块或AMD模块，从而在浏览器中使用。
首先，安装这个转码器。
$ npm install -g es6-module-transpiler
然后，使用compile-modules convert命令将ES6模块文件转码。
$ compile-modules convert file1.js file2.js```
-o参数可以指定转码后的文件名。
$ compile-modules convert -o out.js file1.js
SystemJS
第二种解决方法使用了SystemJS（github.com/systemjs/systemjs）。它是一个垫片库（polyfill），可以在浏览器内加载ES6模块、AMD模块和CommonJS模块，将其转为ES5格式。它在后台调用的是Google的Traceur转码器。
使用时，先在网页内载入system.js文件。
<script src="system.js"></script>
然后，使用System.import方法加载模块文件。
<script>
System.import('./app.js');
</script>```
上面代码中的./app指的是当前目录下的app.js文件。它可以是ES6模块文件，System.import会自动将其转码。
需要注意的是，System.import使用异步加载，返回一个Promise对象，可以针对这个对象编程。下面是一个模块文件。
// app/es6-file.js:
export class q {
constructor() {
this.es6 = 'hello';
}
}
然后，在网页内加载这个模块文件。
<script>
System.import('app/es6-file').then(function(m) {
console.log(new m.q().es6); // hello
});
</script>
上面的代码中，System.import方法返回的是一个Promise对象，所以可以用then方法指定回调函数。
ES6模块与CommonJS模块的差异
讨论Node加载ES6模块之前，必须了解ES6模块与CommonJS模块的差异，具体的两大差异如下。
- CommonJS模块输出的是一个值的复制，ES6模块输出的是值的引用。
- CommonJS模块是运行时加载，ES6模块是编译时输出接口。
第二个差异是因为CommonJS加载的是一个对象（即module.exports属性），该对象只有在脚本运行结束时才会生成。而ES6模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
ES6模块的运行机制与CommonJS不一样。JS引擎对脚本静态分析的时候，遇到模块加载命令import就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用到被加载的模块中取值。换句话说，ES6的import有点像Unix系统的“符号连接”，原始值变了，import加载的值也会跟着变。因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
Node加载
概述
Node对ES6模块的处理比较麻烦，因为它有自己的CommonJS模块格式，与ES6模块格式是不兼容的。目前的解决方案是，将两者分开，ES6模块和CommonJS采用各自的加载方案。
在静态分析阶段，一个模块脚本只要有一行import或export语句，Node就会认为该脚本为ES6模块，否则就为CommonJS模块。如果不输出任何接口，但是希望被Node认为是ES6模块，可以在脚本中加上如下语句。
export {};
上面的命令并不是输出一个空对象，而是不输出任何接口的ES6标准写法。
如果不指定绝对路径，Node加载ES6模块会依次寻找以下脚本，与require()的规则一致。
import './foo';
// 依次寻找
// ./foo.js
// ./foo/package.json
// ./foo/index.js
import 'baz';
// 依次寻找
// ./node_modules/baz.js
// ./node_modules/baz/package.json
// ./node_modules/baz/index.js
// 寻找上一级目录
// ../node_modules/baz.js
// ../node_modules/baz/package.json
// ../node_modules/baz/index.js
// 再上一级目录
ES6模块之中，顶层的this指向undefined，CommonJS模块的顶层this指向当前模块，这是两者的一个重大差异。
import命令加载CommonJS模块
Node采用CommonJS模块格式，模块的输出都定义在module.exports属性上面。在Node环境中，使用import命令加载CommonJS模块，Node会自动将module.exports属性当作模块的默认输出，即等同于export default。
下面是一个CommonJS模块。
// a.js
module.exports = {
foo: 'hello',
bar: 'world'
};
// 等同于
export default {
foo: 'hello',
bar: 'world'
};
import命令加载上面的模块，module.exports会被视为默认输出。
// 写法一
import baz from './a';
// baz = {foo: 'hello', bar: 'world'};
// 写法二
import {default as baz} from './a';
// baz = {foo: 'hello', bar: 'world'};
如果采用整体输入的写法（import * as xxx from someModule），default会取代module.exports作为输入的接口。
import * as baz from './a';
// baz = {
// get default() {return module.exports;},
// get foo() {return this.default.foo}.bind(baz),
// get bar() {return this.default.bar}.bind(baz)
// }
上面的代码中，this.default取代了module.exports。需要注意的是，Node会自动为baz添加default属性，通过baz.default获取module.exports。
// b.js
module.exports = null;
// es.js
import foo from './b';
// foo = null;
import * as bar from './b';
// bar = {default:null};
上面的代码中，es.js采用第二种写法时，要通过bar.default这样的写法才能获取module.exports。
下面是另一个例子。
// c.js
module.exports = function two() {
return 2;
};
// es.js
import foo from './c';
foo(); // 2
import * as bar from './c';
bar.default(); // 2
bar(); // throws, bar is not a function
上面的代码中，bar本身是一个对象，不能当作函数调用，只能通过bar.default调用。
CommonJS模块的输出缓存机制在ES6加载方式下依然有效。
// foo.js
module.exports = 123;
setTimeout(_ => module.exports = null);
上面的代码中，对于加载foo.js的脚本，module.exports将一直是123，而不会变成null。
由于ES6模块是编译时确定输出接口，CommonJS模块是运行时确定输出接口，所以采用import命令加载CommonJS模块时，不允许采用下面的写法。
import {readfile} from 'fs';
上面的写法不正确，因为fs是CommonJS格式，只有在运行时才能确定readfile接口，而import命令要求编译时就确定这个接口。解决方法就是改为整体输入。
import * as express from 'express';
const app = express.default();
import express from 'express';
const app = express();
require命令加载ES6模块
采用require命令加载ES6模块时，ES6模块的所有输出接口都会成为输入对象的属性。
// es.js
let foo = {bar:'my-default'};
export default foo;
foo = null;
// cjs.js
const es_namespace = require('./es');
console.log(es_namespace.default);
// {bar:'my-default'}
上面的代码中，default接口变成了es_namespace.default属性。另外，由于存在缓存机制，es.js对foo的重新赋值没有在模块外部反映出来。
下面是另一个例子。
// es.js
export let foo = {bar:'my-default'};
export {foo as bar};
export function f() {};
export class c {};
// cjs.js
const es_namespace = require('./es');
// es_namespace = {
// get foo() {return foo;}
// get bar() {return foo;}
// get f() {return f;}
// get c() {return c;}
// }