模塊化es6規范

阮一峰Module 的語法

1.概述

歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。

在 ES6 之前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用於服務器，后者用於瀏覽器。ES6 在語言標准的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規范，成為瀏覽器和服務器通用的模塊解決方案。

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對象），未來這些功能可以通過模塊提供。

2.嚴格模式

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）

其中，尤其需要注意this的限制。ES6 模塊之中，頂層的this指向undefined，即不應該在頂層代碼使用this。

3.export 命令

模塊功能主要由兩個命令構成：export和import。export命令用於規定模塊的對外接口，import命令用於輸入其他模塊提供的功能。

一個模塊就是一個獨立的文件。該文件內部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量。下面是一個 JS 文件，里面使用export命令輸出變量。

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

上面代碼是profile.js文件，保存了用戶信息。ES6 將其視為一個模塊，里面用export命令對外部輸出了三個變量。

export的寫法，除了像上面這樣，還有另外一種。

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

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命令規定的是對外的接口，必須與模塊內部的變量建立一一對應關系。

// 報錯
export 1;

// 報錯
var m = 1;
export m;

上面兩種寫法都會報錯，因為沒有提供對外的接口。第一種寫法直接輸出 1，第二種寫法通過變量m，還是直接輸出 1。1只是一個值，不是接口。正確的寫法是下面這樣。

// 寫法一
export var m = 1;

// 寫法二
var m = 1;
export {m};

// 寫法三
var n = 1;
export {n as m};

上面三種寫法都是正確的，規定了對外的接口m。其他腳本可以通過這個接口，取到值1。它們的實質是，在接口名與模塊內部變量之間，建立了一一對應的關系。

同樣的，function和class的輸出，也必須遵守這樣的寫法。

// 報錯
function f() {}
export f;

// 正確
export function f() {};

// 正確
function f() {}
export {f};

另外，export語句輸出的接口，與其對應的值是動態綁定關系，即通過該接口，可以取到模塊內部實時的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代碼輸出變量foo，值為bar，500 毫秒之后變成baz。

這一點與 CommonJS 規范完全不同。CommonJS 模塊輸出的是值的緩存，不存在動態更新，詳見下文《Module 的加載實現》一節。

最后，export命令可以出現在模塊的任何位置，只要處於模塊頂層就可以。如果處於塊級作用域內，就會報錯，下一節的import命令也是如此。這是因為處於條件代碼塊之中，就沒法做靜態優化了，違背了 ES6 模塊的設計初衷。

function foo() {
  export default 'bar' // SyntaxError
}
foo()

上面代碼中，export語句放在函數之中，結果報錯。

4.import命令

使用export命令定義了模塊的對外接口以后，其他 JS 文件就可以通過import命令加載這個模塊。

import { firstName, lastName, year } from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

上面代碼的import命令，用於加載profile.js文件，並從中輸入變量。import命令接受一對大括號，里面指定要從其他模塊導入的變量名。大括號里面的變量名，必須與被導入模塊（profile.js）對外接口的名稱相同。

如果想為輸入的變量重新取一個名字，import命令要使用as關鍵字，將輸入的變量重命名。

import { lastName as surname } from './profile.js';

import命令輸入的變量都是只讀的，因為它的本質是輸入接口。也就是說，不允許在加載模塊的腳本里面，改寫接口。

import {a} from './xxx.js'

a = {}; // Syntax Error : 'a' is read-only;

上面代碼中，腳本加載了變量a，對其重新賦值就會報錯，因為a是一個只讀的接口。但是，如果a是一個對象，改寫a的屬性是允許的。

import {a} from './xxx.js'

a.foo = 'hello'; // 合法操作

上面代碼中，a的屬性可以成功改寫，並且其他模塊也可以讀到改寫后的值。不過，這種寫法很難查錯，建議凡是輸入的變量，都當作完全只讀，不要輕易改變它的屬性。

import后面的from指定模塊文件的位置，可以是相對路徑，也可以是絕對路徑，.js后綴可以省略。如果只是模塊名，不帶有路徑，那么必須有配置文件，告訴 JavaScript 引擎該模塊的位置。

import {myMethod} from 'util';

上面代碼中，util是模塊文件名，由於不帶有路徑，必須通過配置，告訴引擎怎么取到這個模塊。

注意，import命令具有提升效果，會提升到整個模塊的頭部，首先執行。

foo();

import { foo } from 'my_module';

上面的代碼不會報錯，因為import的執行早於foo的調用。這種行為的本質是，import命令是編譯階段執行的，在代碼運行之前。

由於import是靜態執行，所以不能使用表達式和變量，這些只有在運行時才能得到結果的語法結構。

// 報錯
import { 'f' + 'oo' } from 'my_module';

// 報錯
let module = 'my_module';
import { foo } from module;

// 報錯
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

上面三種寫法都會報錯，因為它們用到了表達式、變量和if結構。在靜態分析階段，這些語法都是沒法得到值的

最后，import語句會執行所加載的模塊，因此可以有下面的寫法。

面代碼僅僅執行lodash模塊，但是不輸入任何值。

如果多次重復執行同一句import語句，那么只會執行一次，而不會執行多次。

import 'lodash';
import 'lodash';

上面代碼加載了兩次lodash，但是只會執行一次

import { foo } from 'my_module';
import { bar } from 'my_module';

// 等同於
import { foo, bar } from 'my_module';

上面代碼中，雖然foo和bar在兩個語句中加載，但是它們對應的是同一個my_module實例。也就是說，import語句是 Singleton 模式。

目前階段，通過 Babel 轉碼，CommonJS 模塊的require命令和 ES6 模塊的import命令，可以寫在同一個模塊里面，但是最好不要這樣做。因為import在靜態解析階段執行，所以它是一個模塊之中最早執行的。下面的代碼可能不會得到預期結果。

require('core-js/modules/es6.symbol');
require('core-js/modules/es6.promise');
import React from 'React';

5.模塊的整體加載

除了指定加載某個輸出值，還可以使用整體加載，即用星號（*）指定一個對象，所有輸出值都加載在這個對象上面。

下面是一個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));

注意，模塊整體加載所在的那個對象（上例是circle），應該是可以靜態分析的，所以不允許運行時改變。下面的寫法都是不允許的。

import * as circle from './circle';

// 下面兩行都是不允許的
circle.foo = 'hello';
circle.area = function () {};

6 export default 命令

下面比較一下默認輸出和正常輸出

// 第一組
export default function crc32() { // 輸出
  // ...
}

import crc32 from 'crc32'; // 輸入

// 第二組
export function crc32() { // 輸出
  // ...
};

import {crc32} from 'crc32'; // 輸入

// 正確
export var a = 1;

// 正確
var a = 1;
export default a;

// 錯誤
export default var a = 1;

正是因為export default命令其實只是輸出一個叫做default的變量，所以它后面不能跟變量聲明語句。

// 正確
export default 42;

// 報錯
export 42;

面代碼中，后一句報錯是因為沒有指定對外的接口，而前一句指定對外接口為default。

有了export default命令，輸入模塊時就非常直觀了，以輸入 lodash 模塊為例。

如果想在一條import語句中，同時輸入默認方法和其他接口，可以寫成下面這樣。

import _, { each, forEach } from 'lodash';

export default function (obj) {
  // ···
}

export function each(obj, iterator, context) {
  // ···
}

export { each as forEach };

上面代碼的最后一行的意思是，暴露出forEach接口，默認指向each接口，即forEach和each指向同一個方法。

export default也可以用來輸出類。

// MyClass.js
export default class { ... }

// main.js
import MyClass from 'MyClass';
let o = new MyClass();

7.Module 的加載實現

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要等到整個頁面在內存中正常渲染結束（DOM 結構完全生成，以及其他腳本執行完成），才會執行；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 type="module">，它們會按照在頁面出現的順序依次執行。

<script>標簽的async屬性也可以打開，這時只要加載完成，渲染引擎就會中斷渲染立即執行。執行完成后，再恢復渲染。

<script type="module" src="./foo.js" async></script>

一旦使用了async屬性，<script type="module">就不會按照在頁面出現的順序執行，而是只要該模塊加載完成，就執行該模塊。

ES6 模塊也允許內嵌在網頁中，語法行為與加載外部腳本完全一致。

<script type="module">
  import utils from "./utils.js";

  // other code
</script>

舉例來說，jQuery 就支持模塊加載。

<script type="module">
  import $ from "./jquery/src/jquery.js";
  $('#message').text('Hi from jQuery!');
</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); // tru

利用頂層的this等於undefined這個語法點，可以偵測當前代碼是否在 ES6 模塊之中。

const isNotModuleScript = this !== undefined;

ES6 模塊與 CommonJS 模塊的差異

• CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。
• CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。

第二個差異是因為 CommonJS 加載的是一個對象（即module.exports屬性），該對象只有在腳本運行完才會生成。而 ES6 模塊不是對象，它的對外接口只是一種靜態定義，在代碼靜態解析階段就會生成。

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能否正確讀取這個變化。

上面代碼表明，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的實例。不同的腳本加載這個模塊，得到的都是同一個實例。