ES6(十: import 模块加载)
（一）设计思想
ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。
CommonJS和AMD（现在基本快被放弃的加载方式）模块，都只能在运行时确定这些东西。比如， CommonJS模块就是对象，输入时必须查找对象属性
// CommonJS模块
let { stat, exists, readFile } = require('fs');
// 等同于
let _fs = require('fs');
let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;上面代码的实质是整体加载fs 模块（即加载fs 的所有方法），生成一个对象（_fs ），然后再从这个对象上面读取3个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。
ES6模块不是对象，而是通过export 命令显式指定输出的代码，输入时也采用静态命令的形式。
// ES6模块
import { stat, exists, readFile } from 'fs';上面代码的实质是从fs 模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”，即ES6可以在编译时就完成模块编译，效率要比CommonJS模块的加载方式高。
当然，这也导致了没法引用ES6模块本身，因为它不是对象。
（二）export 命令
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export 关键字输出该变量。
下面是一个JS文件，里面使用export 命令输出变量。
因为不推荐单独每个都命令输出，所以建议在底部一起命令输出。
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};export命令除了输出变量，还可以输出函数或类（class）。
export function multiply (x, y) {
return x * y;
};上面代码对外输出一个函数multiply 。
通常情况下， export 输出的变量就是本来的名字，但是可以使用as 关键字重命名。
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};上面代码使用as 关键字，重命名了函数v1 和v2 的对外接口。重命名后， v2 可以用不同的名字输出两次。
（三）import 命令
（1）import 命令接受一个对象（用大括号表示）
里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js ）对外接口的名称相同。
// main.js
import {firstName, lastName, year} from './profile';（2）为输入的变量重新取一个名字
import命令要使用as 关键字，将输入的变量重命名。
import { lastName as surname } from './profile';（3）import 命令具有提升效果
会提升到整个模块的头部，首先执行。
foo();
import { foo } from 'my_module'; // 会提升到顶部（4）import 语句会执行所加载的模块
加载所以模块，但是不会输出任何值。
import 'lodash'
import 'style.scss'（四）模块的整体加载
这种用法多用于常量定义方式（当然对函数，类都可以使用）。
// profile.js
const firstName = 'Michael';
const lastName = 'Jackson';
const year = 1958;
export {firstName, lastName, year};分别用两种加载方式举例
// main.js （逐一加载）
import { firstName, lastName } from './circle';
console.log("姓名： " + firstName);
// main.js （整体加载）
import * as userName from './circle';
console.log("姓名： " + userName.firstName);（五）export default命令
使用import 命令的时候，开发者需要知道所要加载的变量名或函数名，否则无法加载。
为了解决这种情况，就要用到export default 命令，为模块指定默认输出。
当然，一个模块只能有一个默认输出，因此export deault 命令只能使用一次。
所以， import 命令后面才不用加大括号，因为只可能对应一个方法。
export default 命令用在匿名函数前
// export-default.js
export default function () {
console.log('foo');
}
// import-default.js
import customName from './export-default';
customName(); // 'foo上面代码就是将一个函数定义成默认，然后输出。不需要知道函数名，而且import后面不加大括号。
export default 命令用在非匿名函数前
// export-default.js
export default function foo() {
console.log('foo');
}
// 或者写成
function foo() {
console.log('foo');
}
export default foo;上面代码中， foo 函数的函数名foo ，在模块外部是无效的。加载的时候，视同匿名函数加载。
下面比较一下默认输出和正常输出
// 输出
export default function crc32() {
//TODO
}
// 输入
import crc32 from 'crc32';
// 输出
export function crc32() {
//TODO
};
// 输入
import { crc32 } from 'crc32';在一条import语句中，同时输入默认方法和其他变量
可以写成下面这样。
import customName, { otherMethod } from './export-default';小结
本质上， export default 就是输出一个叫做default 的变量或方法，然后系统允许你为它取任意名字。
（六）解析ES6模块加载实质
前言：
CommonJS模块输出的是一个值的拷贝，而ES6模块输出的是值的引用。
CommonJS模块输出的是被输出值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。
// 01-require-lib.js
module.exports = {
number: 3,
incCounter: function () {
this.number++;
}
};
// 01-require.js
const lib = require('./01-require-lib');
const number = lib.number;
const incCounter = lib.incCounter;
console.log(number); // 3
incCounter();
console.log(number); // 3上面代码说明， counter 输出以后， 01-require-lib.js 模块内部的变化就影响不到number值。
模块加载命令import 时，不会去执行模块，而是只生成一个动态的只读引用。
等到真的需要用到时，再到模块里面去取值，
换句话说， ES6的输入有点像Unix系统的”符号连接“，原始值变了，输入值也会跟着变。因此， ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
// lib.js
export let number= 3;
export function incCounter() {
number++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4上面代码说明， ES6模块输入的变量counter 是活的，完全反应其所在模块lib.js 内部的变化。
再举一个出现在export 一节中的例子。
// m1.js
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
// m2.js
import {foo} from './m1.js';
console.log(foo); // bar
setTimeout(() => console.log(foo), 500);上面代码中， m1.js 的变量foo ，在刚加载时等于bar ，过了500毫秒，又变为等于baz 。
（七）循环加载
CommonJS模块的加载原理
CommonJS的一个模块，就是一个脚本文件。 require 命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。
{
id: '...',
exports: { ... },
loaded: true,
...
}上面代码中，该对象的id 属性是模块名， exports 属性是模块输出的各个接口， loaded 属性是一个布尔值，表示该模块的脚本是否执行完毕。其他还有很多属性，这里都省略了。
以后需要用到这个模块的时候，就会到exports 属性上面取值。即使再次执行require 命令，也不会再次执行该模块，而是到缓存之中取值。
也就是说， CommonJS模块无论加载多少次，都只会在第一次加载时运行一
次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。
CommonJS模块的循环加载
CommonJS模块的重要特性是加载时执行，即脚本代码在require 的时候，就会全部执行。
一旦出现某个模块被”循环加载”，就只输出已经执行的部分，还未执行的部分不会输出。
让我们来看， Node官方文档里面的例子。
脚本文件a.js 代码如下。
exports.done = false;
const 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;
const 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 ，验证这个过程。
const a = require('./a.js');
const 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 没有执行完毕，只执行了第一行。二是， main.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模块是动态引用，遇到模块加载命令import 时，不会去执行模块，只是生成一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。
// a.js
import {bar} from './b.js';
export function foo() {
bar();
console.log('执行完毕');
}
foo();
// b.js
import {foo} from './a.js';
export function bar() {
if (Math.random() > 0.5) {
foo();
}
}按照CommonJS规范，上面的代码是没法执行的。 a 先加载b ，然后b 又加载a ，这时a 还没有任何执行结果，所以输出结果为null ，即对于b.js 来说，变量foo 的值等于null ，后面的foo() 就会报错。
但是， ES6可以执行上面的代码。
$ babel-node a.js
执行完毕a.js 之所以能够执行，原因就在于ES6加载的变量，都是动态引用其所在的模块。只要引用是存在的，代码就能执行。