在使用JavaScript開發大型專案時，模組開發概念是一個必須考慮的問題。其目的就是通過名稱空間對各類業務物件進行一定的封裝，防止命名衝突。

本篇著重介紹ES6 module中的export和import概念。

1. ES5的模組支援方案

在ES6之前，JavaScript本身沒有模組支援，但社群創造了令人印象深刻的解決方案。兩個最重要的（也是不相容的）標準是：AMD 和 CommonJS。

1.1 AMD

說明：AMD，全稱為Asynchronous Module Definition，即非同步模組定義。

特點：其模組和依賴都可以進行非同步載入。

// 定義AMD模組
define('User/UserGrid', // 模組ID
    ['UserM'], // 依賴檔案
    function(userM) { // 初始化函式，依賴檔案以引數形式加入
    }
);

// 使用AMD模組
require(['User/UserGrid'],
    function(userGrid) {
    }
);

1.2 CommonJS

說明：CommonJS模組規範初衷是用於node.js伺服器端，以提供額外的功能，如：IO、檔案系統等功能。

特點：

①同步載入；只有載入完成，才能執行後面的操作。

②快取載入；第一次載入時會把內容存入快取，以後的載入都是從快取獲取。

示例：

// math.js(定義模組)
exports.add = function(a, b) {
    return a + b;
};

// app.js(使用模組)
var math = require('./math');

var rs = math.add(1, 2);
console.log(rs);

2. ES6 module

ES6 module 結合了CommonJS和AMD的優點：類似CommonJS，具有簡潔的語法，對迴圈依賴的支援；類似AMD，支援非同步載入和有條件的模組載入。

ES6 module 使用 export 匯出模組的內容，並使用 import 匯入模組的內容。

2.1 瀏覽器原聲支援

使用之前，先看下各瀏覽器對原生ES6 module的支援情況：Chrome61及61+、Edge16及16+版本都已支援

使用方式：

以Chrome為例，在引入ES6 module 的JS檔案時，使用屬性 type="module" 即可：

<script type="module" src="js/math.js"></script>
<script type="module" src="js/app.js"></script>

2.2 export 匯出（定義模組）

建立ES6模組時，可使用export關鍵字匯出(對外提供)模組的內容，如函式、物件以及原始變數等等。

export 匯出方案有2種：Named exports（命名匯出；每個模組可有多個）和 Default exports（預設匯出；每個模組只能一個）。

1) Named exports 命名匯出

說明：使用 export + 名稱 的形式匯出模組的內容。

注意：在 import 匯入過程中，需指定這些名稱。

語法：

// 1)宣告時匯出
export var myVar1 = 'a';
export let myVar2 = 'b';
export const MY_CONST = 'c';
export function myFunc() {}

// 2)聲明後匯出
var myVar3 = 'a';
export { myVar3 };

// 3)別名匯出
var myVar4 = 'a';
export { myVar4 as myVar };

示例：

// math.js
export function add(a, b) {
    return a + b;
}

// app.js：匯入含有命名匯出的模組時，需要指定成員名稱
import { add } from './math.js';
console.log(add(1, 2)); // => 3

// demo.html
<script type="module" src="js/math.js"></script>
<script type="module" src="js/app.js"></script>

2) Default exports 預設匯出

說明：使用 export default 匯出模組預設的內容，每個模組只能有一個 export default。

語法：

// 1)宣告時匯出
export default expression;
export default function () {}

// 2)別名設定為default匯出
export default function name1() {}
export { name1 as default };

示例：預設匯出宣告的是一個表示式，通常沒有名字，匯入時需指定模組名稱。

// math.js
export function add(a, b) {
    return a + b;
}
export default function cube(x) {
    return x * x * x;
}

// app.js：匯入預設匯出的模組時，需要指定模組名稱
import cube from './math.js';
console.log(cube(3)); // => 27
// 若想同時匯入含有預設匯出、命名匯出的模組，只需要匯入時用','隔開
// import cube, { add } from './math.js';

// demo.html
<script type="module" src="js/math.js"></script>
<script type="module" src="js/app.js"></script>

2.3 import 匯入模組

使用 import 可匯入建立的模組。

語法：

// 1)匯入模組的預設匯出內容
import defaultExport from 'module-name';

// 2)匯入模組的命名匯出內容
import { export1, export2 } from 'module-name';
import { export as alias } from 'module-name'; // 修改別名
import * as name from 'module-name'; // 匯入模組內的所有命名匯出內容

// 3)匯入模組的預設匯出、命名匯出
import defaultExport, { export1, export2 } from 'module-name';
import defaultExport, * as name from 'module-name';

1) 匯入預設匯出

說明：匯入預設匯出的模組時，需要指定模組名稱

示例：

// math.js
export default function cube(x) {
    return x * x * x;
}

// app.js：匯入預設匯出的模組時，需要指定模組名稱
import cube from './math.js';
console.log(cube(3)); // => 27

2) 匯入命名匯出

說明：匯入模組時可使用大括號包含指定命名成員；也可以用  * as moduleName 的形式把此模組的所有命名匯出作為某個物件的成員。

示例：

// math.js
export function add(a, b) {
    return a + b;
}

// app.js：指定使用math模組的add命名匯出
import { add } from './math.js';
console.log(add(1, 2)); // => 3

// 匯入所有的命名匯出作為math物件的成員
import * as math from './math.js'; 
console.log(math.add(1, 2)); // => 3

3) 僅匯入模組

說明：僅匯入模組時，只會執行模組的全域性函式，不會匯入任何成員。

示例：

// math.js
export function add(a, b) {
    return a + b;
}
(function() {
    console.log('hello math.js');
})();

// app.js
import { add } from './math.js'; // => hello math.js

4. 擴充套件閱讀