[[405075]]

本文轉載自微信公眾號「勾勾的前端世界」，作者西嶺。轉載本文請聯系勾勾的前端世界公眾號。

ES 標準模塊化規范-概述

歷史上，JavaScript 一直沒有模塊(module)體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的require、Python 的 import，甚至就連 CSS 都有@import，但是 JavaScript 任何這方面的支持都沒有，這對開發大型的、復雜的項目形成了巨大障礙。

在 ES6 之前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用于服務器，后者用于瀏覽器。ES6 在語言標準的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規范，成為瀏覽器和服務器通用的模塊解決方案。

ES6 模塊的設計思想是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時確定這些東西。比如，CommonJS 模塊就是對象，輸入時必須查找對象屬性。

一個模塊就是一個獨立的文件。該文件內部的所有變量，外部無法獲取。

如果你希望外部能夠讀取模塊內部的某個變量，就必須使用 export 關鍵字導出該變量。想要是要其他模塊導出的內容, 就必須使用 import 導入。

導入 (Importing)

導入的值不能重新分配，盡管導入的對象和數組可以被修改(導出模塊，以及任何其他的導入，都將受到該修改的影響)。在這種情況下，它們的行為與 const 聲明類似。

• 命名導入 (Named Imports)

從源模塊導入其原始名稱的特定項目。

import  { something } from'./module.js'; 

從源模塊導入特定項，并在導入時指定自定義名稱。

import { something as somethingElse } from'./module.js'; 

• 命名空間導入 (Namespace Imports)

將源模塊中的所有內容作為對象導入，將所有源模塊的命名導出公開為屬性和方法。默認導出被排除在此對象之外。

importas module from'./module.js' 

上面的 “something” 的例子將被附加到作為屬性的導入對象上。

“module.something”。 

• 默認導入 (Default Import)

導入源文件的默認導出。

import something from'./module.js'; 

• 空的導入 (Empty Import)

加載模塊代碼，但不要創建任何新對象。

import './module.js'; 

這對于 polyfills 是有用的，或者當導入的代碼的主要目的是與原型有關的時候。

導出 (Exporting)

• 命名導出 (Named exports)

導出具體聲明的值：

var something =true; 
export { something }; 

在導出時重命名：

export { something as somethingElse }; 

聲明后立即導出：

// 這可以與 `var`, `let`, `const`, `class`, and `function` 配合使用 
exportvar something =true; 

• 默認導出(Default Export)

導出一個值作為源模塊的默認導出：

exportdefault something; 

當源模塊只有一個導出時，才建議使用此做法。

將默認和命名導出，并放在同一模塊中是不好的，盡管它是符合規范的。