ES6中的一個模組即使一個包含JS程式碼的檔案，在這個模組中所有的變數都是對其他模組不可見的，除非我們匯出它。ES6的模組系統大致分為匯出（export）和匯入（import）兩個模組。

1、名字匯出（name export）

名字匯出可以在模組中匯出多個宣告。

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function add (x, y) {
    return x + y;
}
 
//------ main.js ------
import { square, add } from 'lib';
console.log(square(10)); //100
console.log(add(2,4));  //6

 

以上對於每一個要匯出的變數都加了export,這樣匯入的變數名必須和匯出的名稱一致。
我們也可以直接匯出一個列表，例如上面的lib.js可以改寫成：

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

export列表可以在模組檔案最外層作用域的每一處宣告，不一定非要把它放在模組檔案的末尾。

也可以直接匯入整個模組，此時的main.js模組將變成這樣。

//------ main.js ------
import * as lib from 'lib';
console.log(lib.square(10)); //100
console.log(lib.add(2,4));  //6

2、預設匯出（default export）

一個模組只能有一個預設匯出，對於預設匯出，匯入的名稱可以和匯出的名稱不一致，這對於匯出匿名函式或類非常有用。

//------ myFunc.js ------
`沒有名字`
export default function() {...};
 
//------ main.js ------
`隨便命名`
`注意這裡預設匯出不需要用{}。`
import myFunc from 'myFunc';
myFunc();
 

當然也可以使用混合的匯出。

//------ lib.js ------
export default function() {...};
export function each() {...};
 
//------ main.js ------
import _,{ each } from 'lib';

3、重新命名export和import

為了解決匯出命名衝突的問題，ES6為你提供了重新命名的方法解決這個問題，當你在匯入名稱時可以這樣做：
匯入重新命名

// 這兩個模組都會匯出以`flip`命名的東西。
// 要同時匯入兩者，我們至少要將其中一個的名稱改掉。
import {flip as flipOmelet} from "eggs.js";
import {flip as flipHouse} from "real-estate.js";

匯出重新命名
同樣，當你在匯出的時候也可以重新命名。你可能會想用兩個不同的名稱匯出相同的值，這樣的情況偶爾也會遇到：

function v1() { ... }
function v2() { ... }
 
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

對於預設匯出，只是匯出了一個特殊的名字叫 default，你也可以就直接用他的名字，把它當做命名匯出來用，下面兩種寫法是等價的：

import { default as foo } from 'lib';
import foo from 'lib';

也可以把名稱as為default來預設匯出：

//------ module1.js ------
export default 123;
 
//------ module2.js ------
const D = 123;
export { D as default };