ES6模塊不是對象，而是export命令顯示指定輸出的代碼，輸入時也采用靜態命令的形式。
// ES6模塊
import {stat, exists, readFile} from 'fs';
上面是從fs模塊里加載3個方法，其他方法不加載。這種加載稱為編譯時加載，即ES6可以在編譯時就完成模塊加載。
由于ES6模塊是編譯時加載，所以可以靜態分析。這樣就能進一步拓寬JavaScript的語法，比如引入宏(macro)和類型檢驗(type system)這些只能靠靜態分析實現的功能。
除了上面說的靜態加載，ES6模塊還有以下好處：
- 不再需要UMD模塊格式了，服務器和瀏覽器現在已經大部分支持ES6模塊格式。
- 將來瀏覽器的新API就能用模塊格式提供，不再必要做成全局變量或者
navigator對象的屬性 - 不再需要對象作為命名空間(比如
Math對象)，這將都可以通過模塊提供。
瀏覽器使用ES6模塊的語法如下：
<script type="module" src="foo.js"></script>
上面由于type屬性為module，所以瀏覽器知道這是一個ES6模塊，上面是在網頁中插入一個模塊foo.js
1. 嚴格模式
ES6的模塊自動采用嚴格模式，不管模塊頭部有沒有use strict；
嚴格模式有以下限制：
- 變量必須聲明后再使用
- 函數的參數不能有同名屬性，否則報錯
- 不能使用
with語句 - 不能對只讀屬性賦值，否則報錯
- 不能使用前綴0表示八進制數，否則報錯
- 不能刪除不可刪除的屬性，否則報錯
- 不能使用
delete prop刪除變量，會報錯，只能刪除屬性delete global[prop] -
eval不會在它的外層作用域引入變量 -
eval和arguments不能被重新賦值 -
arguments不會自動反映函數參數的變化 - 不能使用
arguments.callee - 不能使用
arguments.caller - 禁止
this指向全局對象 - 不能使用
fn.caller和fn.arguments獲取函數調用的堆棧 - 增加了保留字(比如
protected,static和interface)
上面這些限制，模塊必須遵守。這是ES5引入的，詳細請查閱ES5書籍。
2. export命令
模塊主要由連個命令構成：export和import。
export命令用于規定模塊的對外接口；
import命令用于獲取其他模塊提供的功能。
一個模塊就是一個獨立文件。該文件內部的所有變量，外部無法獲取。如果希望外部能夠讀取模塊內部的變量，就必須使用export關鍵字輸出該變量。下面是JS文件，里面使用export命令輸出變量。
// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 2016;
上面代碼是profile.js文件，保存了用戶信息。ES6將其視為一個模塊，里面用export命令對外部輸出了三個變量。
export的寫法，除了像上面這樣，還有另外一種。
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 2016;
export {firstName, lastName, year};
上面代碼在export命令后面，使用大括號指定所要輸出的一組變量。它與前一種寫法(直接放置在var語句前)是等價的，但是應該優先考慮使用這種寫法。因為這樣就可以在腳本尾部，一眼看清楚輸出了哪些變量。
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可以用不同的名字輸出兩次。
需要特別注意的是，export命令規定的是對外的接口，必須與模塊內部的變量建立yi yi對應的關系。
export 1; // 報錯
var m = 1;
export m; // 報錯
上面兩種寫法都會報錯，因為沒有提供對外的接口。1只是一個值，不是接口。正確的寫法是下面這樣：
export var m = 1; // 寫法一
var m = 1;
export {m}; // 寫法二
var n = 1;
export {n as m}; // 寫法三
同樣的，function和class的輸出，也必須遵守這樣的寫法。
export function f(){};
// 或者
function f(){}
export {f};
另外，export語句輸出的接口，與其對應的值是動態綁定關系(引入類型)，即通過該接口，可以取到模塊內部實時的值。
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
上面代碼輸出變量foo，值為bar，500毫秒之后變成baz。
最后，export命令可以出現在模塊的任何位置，只要處于模塊的頂層就可以。但是如果處于塊級作用域內，就會報錯。import命令也是這樣。
function foo(){
export default 'bar' // 語法錯誤
}
foo()
3. import命令
使用export命令定義了模塊的對外接口以后，其他JS文件就可以通過import命令加載這個模塊(文件)。
// main.js
import {firstName, lastName, year} from './profile';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
上面代碼的import命令，就用于加載profile.js文件，并從中輸入變量。import命令接受一個對象（用大括號表示），里面指定要從其他模塊導入的變量名。大括號里面的變量名，必須與被導入模塊(profile.js)對外接口的名稱相同。
如果想為輸入的變量重新去一個名字，import命令要使用as關鍵字，將輸入的變量重命名。
import {lastName as surname} from './profile';
注意，import命令具有提升效果，會提升到整個模塊的頭部，首先執行。
foo();
import {foo} from 'my_module';
上面的代碼不會報錯，因為import的執行早于foo的調用。
如果在一個模塊中，先輸入后輸出同一個模塊，import語句可以與export語句寫在一起。
export { es6 as default } from './someModule';
// 等同于
import {es6} from './someModule';
export default es6;
上面代碼中，export和import語句可以結合在一起，寫成一行。但是從可讀性考慮，不建議采用這種寫法，而應該采用標準寫法。
import語句會執行所加載的模塊，因此可以有下面的寫法：
import 'lodash';
上面代碼僅僅執行lodash模塊，但是不輸入任何值。
4. 模塊的整體加載
除了指定加載某個輸出值，還可以使用整體加載，即用星號(*)指定一個對象，所有輸出值都加載在這個對象上面。
下面是一個circle.js文件，它輸出兩個方法area和circumference。
// circle.js
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
現在，加載這個模塊：
// main.js
import {area, circumference} from './circle';
console.log('圓面積:' + area(4));
console.log('圓周長:' + circumference(14));
上面的寫法是逐一加載的方法，整體加載的寫法如下：
import * as circle from './circle';
console.log('圓面積:' + circle.area(4));
console.log('圓周長:' + circle.circumference(14));
5. export default命令
從前面的例子可以看出，使用import命令的時候，用戶需要知道所要加載的變量名或函數名，否則無法加載。但是，用戶肯定希望快速上手，不愿意閱讀文檔了解模塊有哪些屬性和方法。
為了給用戶提供方便，以至于不用閱讀文檔就能加載模塊，就要用到export default命令，為模塊指定默認輸出：
// export-default.js
export default function(){
console.log('foo');
}
上面代碼是一個模塊文件export-default.js，它的默認輸出是一個函數。
其他模塊加載該模塊時，import命令可以為該匿名函數指定任意名字。
// import-default.js
import customName from './export-default';
customeName(); // 'foo'
上面代碼的import命令，可以用任意名稱指向export-default.js輸出的方法，這時就不需要知道原模塊輸出的函數名。需要注意的是，這時import命令后面，不使用大括號。
export default命令用在非匿名函數前，也是可以的。
export default function foo() {
console.log('foo');
}
// 或者寫成
function foo(){
console.log('foo');
}
export default foo;
上面代碼中，雖然函數有名字foo，但是在模塊外部是無效的。仍然視同為匿名函數加載。
下面比較一下默認輸出和正常輸出：
// 輸出
export default function crc32(){
// ...
}
// 輸入
import crc32 from 'crc32';
// 輸出
export function crc32(){}
// 輸入
import {crc32} from 'crc32';
export default 和 export輸出時候，使用import的區別：
-
export default對應的import語句不需要使用大括號，而export對應的import需要大括號 -
export default對應的import不需要知道加載的模塊里的變量名。而export對應的import必須和export的變量一樣。
但是，export default命令用于指定模塊的默認輸出。顯然，一個模塊只能有一個默認輸出，因此export default命令只能使用一次。所以，import命令后面才不用加大括號，因此只可能對應一個方法。
本質上，export default就是輸出一個叫做default的變量或方法，然后系統允許你為它取任意名字。所以，下面的寫法是有效的：
// module.js
function add(x, y) {
return x * y;
}
export {add as default};
//等同于 export default add;
// app.js
import { default as xxx } from 'modules';
// 等同于 import xxx from 'modules';
正是因為export default命令其實只是輸出一個叫做default的變量，所以它后面不能跟變量聲明語句。
export var a = 1; // 正確
// 正確
var a = 1;
export default a;
// 錯誤
export default var a = 1;
上面代碼中，export default a的含義是將變量a的值賦給變量default。所以，最后一種寫法會報錯。
有了export default命令，輸入模塊時就非常直觀了，以輸入jQuery模塊為例：
import $ from 'jquery';
如果想在一條import語句中，同時輸入默認方法和其他變量，可以寫成下面這樣：
import customName, {otherMethod} from './export-default';
如果要輸出默認的值，只需將值跟在export default之后即可:
export default 42;
export default也可以用來輸出類：
// MyClass.js
export default class {...}
// main.js
import MyClass from 'MyClass';
let o = new MyClass();
6. 模塊的繼承
模塊之間也可以繼承。
假設有一個circleplus模塊，繼承了circle模塊：
// circleplus.js
export * from 'circle';
export var e = 2.718
export default function(x) {
return Math.exp(x);
}
上面代碼中的export *，表示再輸出circle模塊的所有屬性和方法。注意export *命令會忽略circle模塊的default方法。然后，上面代碼又輸出了自定義的e變量和默認方法。
這時，也可以將circle的屬性或方法，改名后再輸出：
// circleplus.js
export { area as circleArea } from 'circle';
上面代碼表示，只輸出circle模塊的area方法，且將其改名為circleArea。
加載上面的模塊的寫法如下：
// main.js
import * as math from 'circleplus';
import exp from 'circleplus';
console.log(exp(math.e));
7. ES6模塊加載是引用類型
8. 循環加載
“循環加載”(circular dependency)指的是，a腳本的執行依賴b腳本，而b腳本的執行又依賴a腳本。
// a.js
var b = require('b');
// b.js
var a = require('a');
通常，“循環加載”表示存在強耦合，如果處理不好，還可能導致遞歸加載，使得程序無法執行，因此應該避免出現。
但是實際上，這是很難避免的，尤其是依賴關系復雜的大項目，很容易出現a依賴b, b依賴c，c又依賴a這樣的情況。這意味著，模塊加載機制必須考慮“循環加載”
ES6模塊的循環加載
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，結果如下：
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的值，導致打印出來undifined。b.js執行完，開始執行a.js，這時就一切正常了。
