摘要：和必須始終顯示在其各自用法的頂級(jí)范圍中。也就是說(shuō)不可以在條件中放置或它們必須放在所有塊和函數(shù)之外。不幸的是，它存在一些缺點(diǎn)，并正式地不鼓勵(lì)這樣做。用戶(hù)可以另外手動(dòng)將和列為命名導(dǎo)入，如果他們想要的話。

ES6提供了兩個(gè)關(guān)鍵字import導(dǎo)入和export導(dǎo)出，語(yǔ)法上有些差別。
!important: import和export必須,始終顯示在,其各自用法的,頂級(jí)范圍中。也就是說(shuō)不可以在if條件中放置import或export; 它們必須放在所有塊和函數(shù)之外。

export關(guān)鍵字要么放在聲明之前，要么作為運(yùn)算符（排序）使用要export的特定綁定列表。

export function foo() {
    // ..
}

export var awesome = 42;

var bar = [1,2,3];
export { bar };

相同的表達(dá)exports的方法:

function foo() {
    // ..
}

var awesome = 42;
var bar = [1,2,3];

export { foo, awesome, bar };

這些都稱(chēng)為 命名導(dǎo)出( named export) ，因?yàn)槟鷮?shí)際上導(dǎo)出變量/函數(shù)/等的名稱(chēng)綁定。
任何你不標(biāo)記export,會(huì)在模塊的范圍內(nèi)保持private。 也就是說(shuō)，盡管var bar = ..看起來(lái)像是在頂級(jí)全局范圍聲明，頂級(jí)范圍實(shí)際上是模塊本身; 模塊中沒(méi)有全局范圍。

注意：模塊仍然可以訪問(wèn)window和所有的globals ，掛起它，只是不是作為詞匯頂級(jí)范圍。 但是，你真的應(yīng)該遠(yuǎn)離全局模塊，如果可能的話。

您還可以在命名導(dǎo)出期間對(duì)模塊成員進(jìn)行“重命名”（也稱(chēng)為別名）：

function foo() { .. }

export { foo as bar };

導(dǎo)入此模塊時(shí)，只有bar成員名稱(chēng)可用于導(dǎo)入; foo保持隱藏在模塊內(nèi)。

模塊導(dǎo)出不僅僅是值或引用的正常賦值，因?yàn)槟?xí)慣于=賦值運(yùn)算符。 實(shí)際上，當(dāng)你導(dǎo)出一些東西，你正在導(dǎo)出一個(gè)綁定（有點(diǎn)像一個(gè)指針）到那個(gè)東西（變量等）。

在模塊中，如果更改已導(dǎo)出綁定的變量的值，即使已經(jīng)導(dǎo)入（參見(jiàn)下一部分），導(dǎo)入的綁定也將解析為當(dāng)前（更新）的值。

試想一下：

var awesome = 42;
export { awesome };

// later
awesome = 100;

導(dǎo)入此模塊時(shí)，無(wú)論是在awesome = 100設(shè)置之前還是之后，一旦分配已經(jīng)發(fā)生，導(dǎo)入的綁定將解析為值100，而不是42。

這是因?yàn)榻壎ū举|(zhì)上是對(duì)awesome變量本身的引用或指針，而不是其值的副本。JS引入了ES6模塊綁定,這是一個(gè)大多數(shù)前所未有的概念。

雖然您可以在模塊的定義中清楚地多次使用export，但ES6絕對(duì)偏好模塊,具有單個(gè)導(dǎo)出的方法，這稱(chēng)為default export。用TC39委員會(huì)的一些成員的話來(lái)說(shuō)，如果你遵循這種模式，你就會(huì)被“簡(jiǎn)單的import語(yǔ)法”所獎(jiǎng)勵(lì)，而如果你不這么做，則反過(guò)來(lái)被更冗長(zhǎng)的語(yǔ)法來(lái)“懲罰”。

默認(rèn)導(dǎo)出將特定導(dǎo)出的綁定設(shè)置為導(dǎo)入模塊時(shí)的默認(rèn)值。綁定的名稱(chēng)字面上是默認(rèn)的。正如你將在后面看到的，當(dāng)導(dǎo)入模塊綁定時(shí)，你也可以重命名它們，就像你通常使用默認(rèn)導(dǎo)出一樣。

每個(gè)模塊定義只能有一個(gè)默認(rèn)值。如果模塊具有默認(rèn)導(dǎo)出，您將看到導(dǎo)入語(yǔ)法如何更簡(jiǎn)潔。

對(duì)于默認(rèn)導(dǎo)出語(yǔ)法有一個(gè)微妙的細(xì)微差別，您應(yīng)該密切注意。比較這兩個(gè)片段：

function foo(..) {
    // ..
}

export default foo;

and

function foo(..) {
    // ..
}

export { foo as default };

在第一個(gè)片段中，您正在導(dǎo)出一個(gè)綁定到此時(shí)的函數(shù)表達(dá)式值，而不是標(biāo)識(shí)符foo。 換句話說(shuō)，導(dǎo)出export default ..采用一個(gè)表達(dá)式。 如果以后將foo分配給模塊中的其他值，則模塊導(dǎo)入仍會(huì)顯示最初導(dǎo)出的函數(shù)，而不是新值。

順便說(shuō)一下，第一個(gè)片段也可以寫(xiě)成：

export default function foo(..) {
    // ..
}

警告：雖然這里function foo..在技術(shù)上,是一個(gè)函數(shù)表達(dá)式，為了模塊的內(nèi)部范圍的目的，它被視為一個(gè)函數(shù)聲明，因?yàn)?b>foo名稱(chēng)綁定在模塊的頂級(jí)作用域 稱(chēng)為“提升”）。 出口默認(rèn)類(lèi)Foo也是如此。但是，雖然你可以做到export var foo = ..，但你目前不能做到export default var foo = ..（或let或const），在一個(gè)令人沮喪的不一致的情況下。 在撰寫(xiě)本文時(shí)，為了一致性，已經(jīng)討論了在ES6之后很快增加這種能力。

function foo(..) {
    // ..
}

export { foo as default };

在此版本的模塊導(dǎo)出中，默認(rèn)導(dǎo)出綁定實(shí)際上是foo標(biāo)識(shí)符而不是它的值，所以您獲得前面描述的綁定行為（即，如果您以后更改foo的值，你在import端看到的值也將更新）。

在默認(rèn)導(dǎo)出語(yǔ)法中要非常小心這個(gè)微妙的問(wèn)題，特別是如果你的邏輯需要更新導(dǎo)出值。 如果你從來(lái)沒(méi)有計(jì)劃更新默認(rèn)導(dǎo)出的值，export default ..是很好的。 如果您計(jì)劃更新值，則必須使用export {.. as default}。 無(wú)論哪種方式，確保評(píng)論你的代碼如何來(lái)解釋你的意圖！

因?yàn)槊總€(gè)模塊只能有一個(gè)默認(rèn)值，所以您可能會(huì)試圖使用一個(gè)對(duì)象的默認(rèn)導(dǎo)出,來(lái)設(shè)計(jì)您的模塊，其中包含所有的API方法，例如：

export default {
    foo() { .. },
    bar() { .. },
    ..
};

這種模式，似乎很密切地，映射了很多開(kāi)發(fā)人員，已經(jīng)構(gòu)建了，他們的ES6之前的模塊，所以，它似乎是，一個(gè)自然的方法。 不幸的是，它存在一些缺點(diǎn)，并正式地不鼓勵(lì)這樣做。

特別是，JS引擎，不能靜態(tài)分析普通對(duì)象的內(nèi)容，這意味著，它不能對(duì)靜態(tài)導(dǎo)入性能，做一些優(yōu)化。 每個(gè)成員多帶帶和顯式導(dǎo)出的優(yōu)點(diǎn)是，引擎可以進(jìn)行靜態(tài)分析和優(yōu)化。

如果你的API，已經(jīng)有多個(gè)成員，似乎這些原則 - 每個(gè)模塊一個(gè)默認(rèn)導(dǎo)出，所有API成員名為exports - 存在沖突，不是嗎？ 但是您可以有一個(gè)默認(rèn)導(dǎo)出以及其他命名導(dǎo)出; 它們不是相互排斥的。

因此，替換掉當(dāng)前的（不建議的）模式：

export default function foo() { .. }

foo.bar = function() { .. };
foo.baz = function() { .. };

you can do that

export default function foo() { .. }

export function bar() { .. }
export function baz() { .. }

注意：在前面的代碼段中，我使用名稱(chēng)foo作為默認(rèn)函數(shù)的標(biāo)簽。 然而，名稱(chēng)foo，為了導(dǎo)出的目的被忽略 - default實(shí)際上是導(dǎo)出的名稱(chēng)。 當(dāng)您導(dǎo)入此默認(rèn)綁定時(shí)，您可以為其指定任何所需的名稱(chēng)，如下一部分中所示。

function foo() { .. }
function bar() { .. }
function baz() { .. }

export { foo as default, bar, baz, .. };

當(dāng)我們短期覆蓋import時(shí)，混合default和命名exports的影響將更加清晰。但實(shí)質(zhì)上它意味著最簡(jiǎn)潔的默認(rèn)import形式,將只檢索foo()函數(shù)。用戶(hù)可以另外手動(dòng)將bar和baz列為命名導(dǎo)入，如果他們想要的話。

你可以想象如果你有很多命名的導(dǎo)出綁定，你模塊的用戶(hù)將是多么乏味。這里有一個(gè)通配符導(dǎo)入表單，您可以在單個(gè)命名空間對(duì)象中導(dǎo)入所有模塊的exports，但是無(wú)法將通配符導(dǎo)入到頂級(jí)綁定。

同樣，ES6模塊機(jī)制被有意設(shè)計(jì)為阻止具有大量輸出的模塊;相對(duì)來(lái)說(shuō)，希望這樣的方法有點(diǎn)困難，作為一種社會(huì)工程，它鼓勵(lì)簡(jiǎn)單的模塊設(shè)計(jì)，因?yàn)檫@將有利于大/復(fù)雜的模塊設(shè)計(jì)。

我建議你不要混合default export與命名exports，這將是是不切實(shí)際或不需要，特別是如果你有一個(gè)大的API和重構(gòu)多帶帶的模塊。在這種情況下，只需使用所有named exports，并記錄您的模塊的用戶(hù)應(yīng)該使用import * as ..（命名空間導(dǎo)入）方法在單個(gè)命名空間中立即帶來(lái)整個(gè)API。

我們之前提到過(guò)，但讓我們更詳細(xì)地回味一下。除了導(dǎo)出表達(dá)式值綁定的export default ...外，所有其他導(dǎo)出表單,都正在導(dǎo)出綁定到本地標(biāo)識(shí)符。