摘要：是一個字符串，它表示模塊的標識。模塊標準主要有兩部分聲明語法和可編程的加載配置模塊如何以及有條件地加載模塊模塊的基礎在的模塊系統中，有兩種命名的和默認的。

在這幾天的工作中，我需要調用同事編寫的兼容jQuery和React的通用組件。他為了兼容jQuery風格的調用和React的組件化，分別export了一個default和幾個方法函數。在調用的過程中，出現了一些小插曲：React代碼和老的jQuery老代碼調用時應該怎么正確的import？雖然是很低級的問題，但是引發了我一些思考：export 和 import 與 module.exports 和 exports 之間的關系以及JavaScript模塊系統的發展歷程。

JavScript這門語言，在設計之初是沒有自己的模塊系統的。但是在 ES6 正式發布之前，社區已經中已經出現了一些庫，實現了簡單的模塊風格，并且這種風格在 ES6 中也是適用的：

每個模塊都是一段代碼，加載之后只會解析過程只會執行一次；

在模塊中可以聲明變量，函數，類等；

默認情況下，這些聲明都是這個模塊的局部聲明；

可以將一些聲明導出，讓其他模塊引用；

一個模塊可以通過模塊標識符或者文件路徑引入其他模塊；

模塊都是單例的，即使多次引用，也只有一個實例;

有一點要注意，避免通過global作為來引用自己的模塊，因為global本身也是一個模塊。

前面說到的，在 ES6 之前，JavaScript 是沒有模塊系統這一說的。在社區的模塊風格出現之前，編寫 JavaScript常常會遇到這種情況：

所有的代碼寫在一個文件里面，按照依賴順序，被依賴的方法必須寫在前面。 簡單粗暴，但是問題很多

通用的代碼無法重復利用。

單個文件會越來越大，后期的命名也會越來越艱難。

按照功能將代碼拆分成不同文件，按照依賴順序加載，被依賴的方法必須先加載。通用代碼可以復用，但是問題還是很多

過多全局變量，容易沖突。

過多 JavaScript 腳本加載導致頁面阻塞（雖然 HTML5中的 defer和 async可以適當的減輕這個問題）。

過多依賴不方便管理和開發。

隨著 JavaScript 的地位慢慢提高，為了滿足日常開發的需要，社區中慢慢出現了相對比較同意的模塊標準，主要有兩種：

CommonJS Modules: 這個標準主要在 Node.js 中實現（Node.js的模塊比 CommonJS 好稍微多一些特性）。其特點是：

簡單的語法

為同步加載和服務端而設計

Asynchronous Module Definition (AMD): 這個標準最受歡迎的實現實在 RequireJS 中。其特點是：

稍微復雜一點點的語法，使得AMD的運行不需要編譯

為異步加載和瀏覽器而設計

上述只是 ES5 模塊系統的簡單介紹，如果有興趣可以去看看Writing Modular JavaScript With AMD, CommonJS & ES Harmony。

根據CommonJS規范，一個多帶帶的文件就是一個模塊。每一個模塊都是一個多帶帶的作用域，在該模塊內部定義的變量，無法被其他模塊讀取，除非定義為global對象的屬性，或者將屬性暴露出來。在 Nodejs就是如此。

比如：

const circle = require("./circle.js"); // 使用 require 加載模塊 circle
console.log(`The area of a circle of radius 4 is ${circle.area(4)}`);

在 circle.js 中:

const PI = Math.PI;
exports.area = (r) => PI * r * r;
exports.circumference = (r) => 2 * PI * r;

circle.js 模塊導出了 area()和 circumffference()兩個方法，變量 PI是這個模塊的私有變量。如果想為自定義的模塊添加屬性或者方法，將它們添加到 exports 這個特殊的對象上就可以達到目的。
如果希望模塊提供的接口是一個構造函數，或者輸出的是一個完整的對象而不是一個屬性，那么可以使用 module.exports 代替 exports。但是注意，exports 是 module.exports 的一個引用，只是為了用起來方便，只要沒有重寫 module.exports對象，那么module.exports.xxx就等價于exports.xxx。

const square = require("./square.js");
var mySquare = square(2);
console.log(`The area of my square is ${mySquare.area()}`);

square.js:

module.exports = (width) => {
  return {
    area: () => width * width
  };
}

AMD是“Asynchronous Module Definition”的縮寫。通過異步方式加載模塊，模塊的加載不影響后續語句的執行，所有依賴加載中的模塊的語句，都會放在一個回調函數中，等到該模塊加載完成后，這個回調函數才運行。注意，在 AMD 中模塊名是全局作用域，可以在全局引用。

AMD規范的API非常簡單：

define(id?, dependencies?, factory);

規范定義了一個define函數，它用來定義一個模塊。它包含三個參數，前兩個參數都是可選的。

id：是一個string字符串，它表示模塊的標識。通常用來定義這個模塊的名字，一般不用

dependencies：是一個數組，依賴的模塊的標識。也是可選的參數，每個依賴的模塊的輸出將作為參數一次傳入 factory 中。如果沒有指定 dependencies，那么它的默認值是 ["require", "exports", "module"]。

factory：一個函數或者對象。如果是函數，在依賴的模塊加載成功后，會執行這個回調函數，它的返回值就是模塊的輸出接口或值。它的參數是所有依賴模塊的引用。

定義一個名為 myModule 的模塊，它依賴 jQuery 模塊：

define("myModule", ["jquery"], function($) {
    // $ 是 jquery 模塊的輸出
    $("body").text("hello world");
});
// 使用
define(["myModule"], function(myModule) {});

ES6 模塊系統的目標就是創建一個統一的模塊格式，讓 CommonJS 和 AMD的使用者都滿意：

和CommonJS類似，但是更加簡潔的語法，循環引用的支持更好。

和AMD類似，直接支持異步加載和可配置的模塊加載。

模塊標準主要有兩部分：

聲明語法：import 和 export

可編程的加載 API：配置模塊如何以及有條件地加載模塊

在 ES6的模塊系統中，有兩種 export：命名的 export 和默認的 export。在一個文件中，命名的 export 可以有多個，而默認的 default export 只能有一個。可以同時使用，但最好還是分開使用。

命名的export

也可以在聲明表達式前面加上 export 關鍵字可以直接導出將聲明的對象導出：

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from "lib";
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

如果要導出一個已經存在的變量，需要加上{}:

const random = Math.random;
export random;  // SyntaxError: Unexpected token, expected {
export { random };

使用 CommonJS 語法實現相同目的：

//------ lib.js ------
var sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function diag(x, y) {
    return sqrt(square(x) + square(y));
}
module.exports = {
    sqrt: sqrt,
    square: square,
    diag: diag,
};

//------ main.js ------
var square = require("lib").square;
var diag = require("lib").diag;
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

下面是來自 MDN 的更加完整的export 語法：

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const

export expression;
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

默認導出

每個模塊只有一個默認導出的值， default export 可以是一個函數，一個類，一個對象或者其他任意值。有兩種形式的 default export:

被標記的聲明。導出一個函數或者類

直接導出值。導出表達式的運行結果

導出一個函數：

//------ myFunc.js ------
export default function () {} // 沒有分號 函數名可有可無

//------ main1.js ------
import myFunc from "myFunc";
myFunc();

導出一個類：

//------ MyClass.js ------
export default class {} // 沒有分號 類名可有可無

//------ main2.js ------
import MyClass from "MyClass";
const inst = new MyClass();

導出表達式運行結果：

export default "abc";
export default foo();
export default /^xyz$/;
export default 5 * 7;
export default { no: false, yes: true };

前面說的到的導出匿名函數和類，可以將其視為導出表達式的運行結果：

export default (function () {});
export default (class {});

每一個 default export 都是這種結構：

export default <>

相當于：

const __default__  = <>;
export { __default__ as default }; // (A)

export后面是不能接變量聲明的，因為一個變量聲明表達式中可以一次生命多個變量。考慮下面這種情況：

export default const foo = 1, bar = 2, baz = 3; // not legal JavaScript!

應該導出 foo，bar，還是 baz 呢？

必須在模塊的最頂層使用import和export

if (Math.random()) {
    import "foo"; // SyntaxError
}

// You can’t even nest `import` and `export`
// inside a simple block:
{
    import "foo"; // SyntaxError
}

import 會被提升到當前作用域的頂部

模塊的 import 會被提升到當前作用域的頂部。所以下面這種情況是可行的：

foo();

import { foo } from "my_module";

import 的一些細節

import的基本語法：

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

什么是循環引用？模塊A 引用了模塊 B，模塊 B 又引用了模塊 A。如果可能的話，應該避免這種情況出現，這會使得模塊之間過度的耦合。但是這種有時候又是無法避免的。

a.js 中的內容：

console.log("模塊 a 開始了！");
exports.done = false;
var b = require("./b.js");
console.log("在 a 中, b.done = %j", b.done);
exports.done = true;
console.log("模塊 a 結束了！");

b.js 中的內容：

console.log("模塊 b 開始了！");
exports.done = false;
var a = require("./a.js");
console.log("在 b 中, a.done = %j", a.done);
exports.done = true;
console.log("模塊 b 結束了！");

main.js 中的內容：

console.log("main 開始了！");
var a = require("./a.js");
var b = require("./b.js");
console.log("在 main 中, a.done=%j, b.done=%j", a.done, b.done);

當 main.js 加載 a.js 時，a.js 又加載 b.js。這個時候，b.js 又會嘗試去加載 a.js 。為了防止出現無限循環的加載，a.js 中的 exports 對象會返回一個 unfinished copy 給 b.js 模塊。然后模塊 b 完成加載，同時將提供模塊 a 的接口。當 main.js 加載完 a，b 兩個模塊之后，輸出如下：

main 開始了！
模塊 a 開始了！
模塊 b 開始了！
在 b 中, a.done = false
模塊 b 結束了！
在 a 中, b.done = true
模塊 a 結束了！
在 main 中, a.done=true, b.done=true

這種方式有其局限性：

Nodejs風格的單個值的導出無法工作。當a使用 module.exports 導出一個值時，那么 b 模塊中引用的變量 a 在聲明之后就不會再更新

  module.exports = function(){};

無法直接命名你的引用

var foo = require("a").foo; // foo  is undefined

ES6中，imports 是 exprts 的只讀視圖，直白一點就是，imports 都指向 exports 原本的數據，比如：

//------ lib.js ------
export let counter = 3;
export function incCounter() {
    counter++;
}

//------ main.js ------
import { counter, incCounter } from "./lib";

// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4
// The imported value can’t be changed
counter++; // TypeError

因此在 ES6中處理循環引用特別簡單，看下面這段代碼：

//------ a.js ------
import {bar} from "b"; // (i)
export function foo() {
  bar(); // (ii)
}

//------ b.js ------
import {foo} from "a"; // (iii)
export function bar() {
  if (Math.random()) {
    foo(); // (iv)
  }
}

假設先加載模塊 a，在模塊 a 加載完成之后，bar 間接性地指向的是模塊 b 中的 bar。無論是加載命令的 imports 還是未完成的 imports，imports 和 exports 之間都有一個間接的聯系，所以總是可以正常工作。

除了聲明式加載模塊，ES6還提供了一個可編程的 API：

以編程的方式使用模塊

配置模塊的加載

要注意，這個 API 并不是ES6標準中的一部分，在“JavaScript Loader Standrad”中，并且具體的標準還在制定中，所以下面講到的內容都是試驗性的。

Loader 用于處理模塊標識符和加載模塊等。它的 construct 是Reflect.Loader。每個平臺在全局作用域中都有一個全局變量System的實例來實現 loader 的一些特性。

你可以通過 API 提供的 Promise，以編碼的方式 import 一個模塊：

System.import("some_module")
.then(some_module => {
    // Use some_module
})
.catch(error => {
    ···
});

System.import() 可以：

可以在 script 標簽中使用模塊

有條件地加載模塊

System.import() 返回一個模塊, 可以用 Promise.all() 來導入多個模塊:

Promise.all(
    ["module1", "module2", "module3"]
    .map(x => System.import(x)))
.then(([module1, module2, module3]) => {
    // Use module1, module2, module3
});

Loader的其他方法

Loader 還有一些其他方法，最重要的三個是：

System.module(source, [options])
將 source 中的 JavaScript 代碼當做一個模塊執行，返回一個 Promise

System.set(name, modules)
注冊一個模塊，比如用 System.module 創建的模塊

System.define(name, source, [options])
執行 source 中的代碼，將返回的結果注冊為一個模塊

目前 Loader API 還處于試驗階段，更多的細節不想在深入。有興趣的話可以去看看

在 CommonJS 和 ES6中，兩種模塊導入方式有一些不同：

在 CommonJS 中，導入的內容是模塊導出的內容的拷貝。

在 ES6 中，導出值得實時只讀視圖，類似于引用。

在 CommonJS 中，如果你將一個導入的值保存到一個變量中，這個值會被復制兩次：第一次是這個值所屬模塊導出時（行 A），第二次是這個值被引用時（行 B）。

//------ lib.js ------
var counter = 3;
function incCounter() {
    counter++;
}
module.exports = {
    counter: counter, // (A)
    incCounter: incCounter,
};

//------ main1.js ------
var counter = require("./lib").counter; // (B)
var incCounter = require("./lib").incCounter;

// The imported value is a (disconnected) copy of a copy
console.log(counter); // 3
incCounter();
console.log(counter); // 3

// The imported value can be changed
counter++;
console.log(counter); // 4

如果通過 exports對象來訪問這個值，這個值還是會再復制一次：

//------ main2.js ------
var lib = require("./lib");

// The imported value is a (disconnected) copy
console.log(lib.counter); // 3
lib.incCounter();
console.log(lib.counter); // 3

// The imported value can be changed
lib.counter++;
console.log(lib.counter); // 4

和 CommonJS 不同的是，在 ES6中，所有的導入的數據都是導出值的視圖，每一個導入的數據都和原始的數據有一個實時連接（并不是 JS 中Object引用的那種概念，因為導出的值可以是一個原始類型，primitive type，而且導入的數據是只讀的）。

無條件的引入 (import x from "foo") 就是用 const 聲明的變量

模塊的屬性foo (import * as foo from "foo") 則是創建一個 frozen object.

//------ lib.js ------
export let counter = 3;
export function incCounter() {
    counter++;
}

//------ main1.js ------
import { counter, incCounter } from "./lib";

// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4

// The imported value can’t be changed
counter++; // TypeError

如果使用*引入模塊，會得到相同的結果：

//------ main2.js ------
import * as lib from "./lib";

// 導入的值 counter 是活動的
console.log(lib.counter); // 3
lib.incCounter();
console.log(lib.counter); // 4

// 導入的值是只讀的不能被修改
lib.counter++; // TypeError

雖然不能修改導入的值，但是可以修改對象指向的內容，這個 const 常量的處理是一致的。例如：

//------ lib.js ------
export let obj = {};

//------ main.js ------
import { obj } from "./lib";

obj.prop = 123; // OK
obj = {}; // TypeError

關于更多 ES6 模塊相關的內容，有興趣的朋友可以去下面這些地方看看：

http://exploringjs.com/es6/ch_modules.html

http://www.ecma-international.org/ecma-262/6.0/#sec-modules

參考資料：

http://stackoverflow.com/a/40295288

http://exploringjs.com/es6/ch_modules.html

http://zhaoda.net/webpack-handbook/amd.html

[https://nodejs.org/api/module...

http://speakingjs.com/es5/ch17.html#freezing_objects