ES6模塊之export和import詳解

ES6中的模塊即使一個包含JS代碼的文件，在這個模塊中所有的變量都是對其他模塊不可見的，除非我們導出它。ES6的模塊系統大致分為導出（export）和導入（import）兩個模塊。

1、模塊導出（export）

你可以 導出所有的最外層 函數、 類以及 var、 let或 const聲明的變量。

ES6模塊只支持靜態導入和導出，你只可以在模塊的最外層作用域使用 import和 export，不可在條件語句中使用，也不能在函數作用域中使用 import。所有導出的標識符一定要在源代碼中明確地導出它們的名稱，你不能通過編寫代碼遍歷一個數組然后用數據驅動的方式導出一堆名稱。如下導出是錯誤的。

function squre() {};
if(true) {
    export {squre};
}

 

ES6的導出分為名字導出和默認導出

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';

2、重命名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 };

3、作為中轉模塊導出

有時候為了避免上層模塊導入太多的模塊，我們可能使用底層模塊作為中轉，直接導出另一個模塊的內容如下：

//------ myFunc.js ------
export default function() {...};

//------ lib.js ------
export * from 'myFunc';
export function each() {...};

//------ main.js ------
import myFunc,{ each } from 'lib';

 

這樣main.js只需導入lib模塊即可，雖然myFunc模塊從lib模塊導出，但是lib卻不能使用myFunc模塊的內容。

參考鏈接：

http://www.infoq.com/cn/articles/es6-in-depth-modules

http://2ality.com/2014/09/es6-modules-final.html
http://blog.csdn.net/lihongxun945/article/details/49031383