Module 的加載實現
上一章介紹了模塊的語法，本章介紹如何在瀏覽器和 Node 之中加載 ES6 模塊，以及實際開發中經常遇到的一些問題（比如循環加載）。
瀏覽器加載
傳統方法
在 HTML 網頁中，瀏覽器通過<script>標簽加載 JavaScript 腳本。
<!-- 頁面內嵌的腳本 -->
<script type="application/javascript">
// module code
</script>
<!-- 外部腳本 -->
<script type="application/javascript" src="path/to/myModule.js">
</script>
上面代碼中，由於瀏覽器腳本的默認語言是 JavaScript，因此type="application/javascript"可以省略。
默認情況下，瀏覽器是同步加載 JavaScript 腳本，即渲染引擎遇到<script>標簽就會停下來，等到執行完腳本，再繼續向下渲染。如果是外部腳本，還必須加入腳本下載的時間。
如果腳本體積很大，下載和執行的時間就會很長，因此成瀏覽器堵塞，用戶會感覺到瀏覽器“卡死”了，沒有任何響應。這顯然是很不好的體驗，所以瀏覽器允許腳本異步加載，下面就是兩種異步加載的語法。
<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
上面代碼中，<script>標簽打開defer或async屬性，腳本就會異步加載。渲染引擎遇到這一行命令，就會開始下載外部腳本，但不會等它下載和執行，而是直接執行后面的命令。
defer與async的區別是：前者要等到整個頁面正常渲染結束，才會執行；后者一旦下載完，渲染引擎就會中斷渲染，執行這個腳本以后，再繼續渲染。一句話，defer是“渲染完再執行”，async是“下載完就執行”。另外，如果有多個defer腳本，會按照它們在頁面出現的順序加載，而多個async腳本是不能保證加載順序的。
加載規則
瀏覽器加載 ES6 模塊，也使用<script>標簽，但是要加入type="module"屬性。
<script type="module" src="foo.js"></script>
上面代碼在網頁中插入一個模塊foo.js，由於type屬性設為module，所以瀏覽器知道這是一個 ES6 模塊。
瀏覽器對於帶有type="module"的<script>，都是異步加載，不會造成堵塞瀏覽器，即等到整個頁面渲染完，再執行模塊腳本，等同於打開了<script>標簽的defer屬性。
<script type="module" src="foo.js"></script>
<!-- 等同於 -->
<script type="module" src="foo.js" defer></script>
<script>標簽的async屬性也可以打開，這時只要加載完成，渲染引擎就會中斷渲染立即執行。執行完成后，再恢復渲染。
<script type="module" src="foo.js" async></script>
ES6 模塊也允許內嵌在網頁中，語法行為與加載外部腳本完全一致。
<script type="module">
import utils from "./utils.js";
// other code
</script>
對於外部的模塊腳本（上例是foo.js），有幾點需要注意。
- 代碼是在模塊作用域之中運行，而不是在全局作用域運行。模塊內部的頂層變量，外部不可見。
- 模塊腳本自動采用嚴格模式，不管有沒有聲明
use strict。 - 模塊之中，可以使用
import命令加載其他模塊（.js后綴不可省略，需要提供絕對 URL 或相對 URL），也可以使用export命令輸出對外接口。 - 模塊之中，頂層的
this關鍵字返回undefined，而不是指向window。也就是說，在模塊頂層使用this關鍵字，是無意義的。 - 同一個模塊如果加載多次，將只執行一次。
下面是一個示例模塊。
import utils from 'https://example.com/js/utils.js'; const x = 1; console.log(x === window.x); //false console.log(this === undefined); // true delete x; // 句法錯誤，嚴格模式禁止刪除變量 利用頂層的this等於undefined這個語法點，可以偵測當前代碼是否在 ES6 模塊之中。
const isNotModuleScript = this !== undefined; ES6 模塊與 CommonJS 模塊的差異
討論 Node 加載 ES6 模塊之前，必須了解 ES6 模塊與 CommonJS 模塊完全不同。
它們有兩個重大差異。
- CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。
- CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。
第二個差異是因為 CommonJS 加載的是一個對象（即module.exports屬性），該對象只有在腳本運行完才會生成。而 ES6 模塊不是對象，它的對外接口只是一種靜態定義，在代碼靜態解析階段就會生成。
下面重點解釋第一個差異。
CommonJS 模塊輸出的是值的拷貝，也就是說，一旦輸出一個值，模塊內部的變化就影響不到這個值。請看下面這個模塊文件lib.js的例子。
// lib.js var counter = 3; function incCounter() { counter++; } module.exports = { counter: counter, incCounter: incCounter, }; 上面代碼輸出內部變量counter和改寫這個變量的內部方法incCounter。然后，在main.js里面加載這個模塊。
// main.js var mod = require('./lib'); console.log(mod.counter); // 3 mod.incCounter(); console.log(mod.counter); // 3 上面代碼說明，lib.js模塊加載以后，它的內部變化就影響不到輸出的mod.counter了。這是因為mod.counter是一個原始類型的值，會被緩存。除非寫成一個函數，才能得到內部變動后的值。
// lib.js var counter = 3; function incCounter() { counter++; } module.exports = { get counter() { return counter }, incCounter: incCounter, }; 上面代碼中，輸出的counter屬性實際上是一個取值器函數。現在再執行main.js，就可以正確讀取內部變量counter的變動了。
$ node main.js 3 4 ES6 模塊的運行機制與 CommonJS 不一樣。JS 引擎對腳本靜態分析的時候，遇到模塊加載命令import，就會生成一個只讀引用。等到腳本真正執行時，再根據這個只讀引用，到被加載的那個模塊里面去取值。換句話說，ES6 的import有點像 Unix 系統的“符號連接”，原始值變了，import加載的值也會跟着變。因此，ES6 模塊是動態引用，並且不會緩存值，模塊里面的變量綁定其所在的模塊。
還是舉上面的例子。
// lib.js export let counter = 3; export function incCounter() { counter++; } // 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); setTimeout(() => console.log(foo), 500); 上面代碼中，m1.js的變量foo，在剛加載時等於bar，過了500毫秒，又變為等於baz。
讓我們看看，m2.js能否正確讀取這個變化。
$ babel-node m2.js bar baz 上面代碼表明，ES6 模塊不會緩存運行結果，而是動態地去被加載的模塊取值，並且變量總是綁定其所在的模塊。
由於 ES6 輸入的模塊變量，只是一個“符號連接”，所以這個變量是只讀的，對它進行重新賦值會報錯。
// lib.js export let obj = {}; // main.js import { obj } from './lib'; obj.prop = 123; // OK obj = {}; // TypeError 上面代碼中，main.js從lib.js輸入變量obj，可以對obj添加屬性，但是重新賦值就會報錯。因為變量obj指向的地址是只讀的，不能重新賦值，這就好比main.js創造了一個名為obj的const變量。
最后，export通過接口，輸出的是同一個值。不同的腳本加載這個接口，得到的都是同樣的實例。
// mod.js function C() { this.sum = 0; this.add = function () { this.sum += 1; }; this.show = function () { console.log(this.sum); }; } export let c = new C(); 上面的腳本mod.js，輸出的是一個C的實例。不同的腳本加載這個模塊，得到的都是同一個實例。
// x.js import {c} from './mod'; c.add(); // y.js import {c} from './mod'; c.show(); // main.js import './x'; import './y'; 現在執行main.js，輸出的是1。
$ babel-node main.js 1 這就證明了x.js和y.js加載的都是C的同一個實例。
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;} // } 循環加載
“循環加載”（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官方文檔里面的例子。腳本文件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沒有執行完畢，只執行了第一行。二是，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處理“循環加載”與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，這時就一切正常了。
再看一個稍微復雜的例子（摘自 Dr. Axel Rauschmayer 的《Exploring ES6》）。
// 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給出的一個例子。
// 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是 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。它是一個墊片庫（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方法指定回調函數。