摘要：當我們學習的模塊化，就會發現它的發展深受的影響。嚴格模式在模塊系統中，嚴格模式是默認開啟的。同樣的，模塊內部的聲明只在模塊內部有效。在中，我們使用導入內容在模塊中，我們只需要為導入的綁定起一個名字我們也可以導入具名導出的內容。

在 ES6 之前，我們已經知道了 RequireJS，AngularJS 的依賴注入，以及 CommonJS，具體可以看筆者的上一篇文章《JS模塊化歷史簡介》。當我們學習 ES6 的模塊化，就會發現它的發展深受 CommonJS 的影響。通過這篇文章，我們將看到 export 和 import 語句，以及 ES6 模塊是怎么與 CommonJS 模塊兼容的。

在 ES6 模塊系統中，嚴格模式是默認開啟的。嚴格模式是語言從語法層面限制你使用一些不好的寫法，所以它更嚴格（==）。它也讓編譯器更好地處理代碼。下面是 MDN上關于嚴格模式的解釋：嚴格模式

變量必須顯式聲明

函數的形參必須有唯一的名稱（否則會報語法錯誤）

不能使用with

給只讀的屬性賦值會報錯

像 00840 這樣的八進制數字會報語法錯誤

試圖 delete 無法刪除的屬性會報錯

delete prop 會報語法錯誤，可以使用 delete global[prop]

eval 不會在所在的詞法作用域引入新的變量

eval 和 arguments 不能被改變或賦值

arguments 不會跟蹤方法的參數變化

arguments.callee 不再支持，會報 TypeError

arguments.caller 不再支持，會報 TypeError

傳入方法內部的 this 不再被強制轉換成 Object

fn.caller 和fn.arguments 不再支持

保留關鍵字 protected，static ，interface 不能被綁定

即使在 ES6 中嚴格默認是默認開啟的，也推薦在每個模塊中都使用 use strict 關鍵字。

讓我們先來看下 export 關鍵字吧~

在 CommonJS 中，導出模塊可以用 module.exports 。從下面的代碼可以看出，你可以導出任何值：

module.exports = 1
module.export = NaN
module.exports = "foo" 
module.exports = { foo: "bar" } 
module.exports = ["foo", "bar"] 
module.exports = function foo () {}

像 CommonJS 模塊一樣，ES6 模塊也是暴露 API 的文件。同樣的，ES6 模塊內部的聲明只在模塊內部有效。這就意味著，某個模塊中的變量，如果沒有被導出，在其他模塊中就無法使用。

上面的 CommonJS 代碼如果用 ES6 語法寫起來也很相似，主要就是將 module.exports 替換為 export default

export default 1 
export default NaN 
export default "foo" 
export default { foo: "bar" } 
export default ["foo", "bar"] 
export default function foo () {}

而與 CommonJS 不同的是，export 語句只能放在 ES6 模塊代碼的頂層，就算放在一個立即執行的函數中也不行。可想而知，這種限制讓編譯器更容易解析 ES6 模塊，同時也讓避免了在方法中動態導出這種不是很實用的騷操作。

function foo () { 
    export default "bar" // SyntaxError 
} 
foo()

導出語法不是只有 export default，你也可以使用具名導出。

在 CommonJS 中導出時也不是必須將 module.exports 賦值為一個對象，你可以直接改變它的屬性。

module.exports.foo = "bar"
module.exports.baz = "ponyfoo"

好了，下面用 ES6 的寫法也很簡單（原文說了一堆不太重要就沒翻~）：

export var foo = "bar"
export var baz = "ponyfoo"

有一句話要始終牢記，我們導出的是綁定而不是值。

在 ES6 模塊中重要的一個點是：導出的是綁定，而不是值或者引用。這就意味著你導出的變量foo 被綁定在了模塊上，它的值改變了，外部也能收到變化。盡管通常情況下不推薦在模塊加載后改變導出的值。

如果你有一個 ./a 模塊，導出的 foo 將在 500ms 后從 bar 變為 baz：

export var foo = "bar"
setTimeout(() => foo = "baz", 500)

除了默認綁定和具名綁定，我們還可以導出一個列表的綁定。

下面的代碼可以看到，ES6 模塊允許我們導出一個包含頂級成員的列表：

var foo = "ponyfoo"
var bar = "baz"
export { foo, bar }

如果你想改變其中變量的名字，可以用以下語法：

export { foo as ponyfoo }

同時也可以指定其中的某個為默認導出：

export { foo as default, bar }

而通常的最佳實踐是只使用 export default，并且將其放在模塊的底部。

如果同時使用命名導出，導出列表和默認導出，很容易造成困擾，所以大部分情況下作者建議只使用 export default，并且將語句放在模塊文件的底部。你可以將要導出的對象叫作 api ：

var api = {
    foo: "bar",
    baz: "ponyfoo"
}
export default api

這樣做有幾個好處：（原文比較啰嗦，下面提煉兩點）

將導出的內容包裹在一個對象中，在模塊內部可以很容易找到導出的內容。

只使用 export default 具有一致性，不會因為過多導出方式造成混淆，在使用的時候也更加方便。

我們已經熟悉了 export 的 API 和注意事項，下面來看 import 語句。

作為與 export 相對的語句，import 可以讓我們導入另一個模塊中的內容。模塊的加載方式，在瀏覽器端主要依靠 Babel 實現。而在內部 import 語句的實現也幾乎是和 CommonJS 的 require 語句一樣。

讓我們用 lodash 來說明。下面的語句簡單地加載了 Lodash 模塊到我們自己的模塊，它沒有創建任何變量，但它將會執行 lodash 模塊頂層代碼的內容。

import "lodash"

在講導入綁定之前，我們需要先明確的是，跟 export 語句類似，import 語句也只能在模塊的頂層代碼使用。這能讓編譯器更好地處理解析工作，也能幫助其他靜態分析工具解析我們的代碼。

在 CommonJS 中，我們使用 require 導入內容：

var _ = require("lodash")

在 ES6 模塊中，我們只需要為導入的綁定起一個名字：

import _ from "lodash"

我們也可以導入具名導出的內容。

這個語法跟 ES6 的解構賦值很相似，但是也不太一樣：

import { map, reduce } from "lodash"

跟解構賦值不同的其中一點是，你可以為導入的綁定創建別名，可以同時使用有別名和沒有別名的導入。

import { cloneDeep as clone, map } from "lodash"

也可以同時使用具名和默認的導入，如果要在花括號內使用默認導入，需要使用 default 關鍵字，當然也可以給它起個別名，或者像第三行那樣：

import { default, map } from "lodash"
import { default as _, map } from "lodash"
import _, { map } from "lodash"

我們也可以導入一個模塊中的整個命名空間。import * 這個語法后面必須跟一個別名，這個別名中就存放了導入模塊的所有綁定。如果里面包含一個默認導出，那么它放被放在了 alias.default 中

import * as _ from "lodash"

我們今天可以直接使用 ES6 模塊，得益于 Babel 編譯器借助了 CommonJS 模塊的實現。這其中的一個好處就是 CommonJS 和 ES6 模塊之間是兼容的，即我們可以在 ES6 模塊中直接寫 CommonJS 的語法。

ES6 模塊系統看起來很棒，而它也是 JavaScript 中的一個最重要的功能。希望在不久的將來，模塊加載 API 可以最終敲定并直接在瀏覽器端實現。

原文鏈接

歡迎關注我的公眾號：碼力全開（codingonfire）