介紹 ES Modules（模組） – JavaScript 完全手冊（2018版）

摘要： 小編推薦： 掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。 注：本文為 《 JavaScript 完全手冊（2018版） 》第34節，你可以檢視該手冊的完整目錄。 ...

小編推薦： ofollow,noindex">掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。

注：本文為 《 JavaScript 完全手冊（2018版） 》第34節，你可以檢視該手冊的完整目錄。

ES Modules 是用於處理模組的 ECMAScript 標準。 雖然 Node.js 長期使用 CommonJS 標準，但瀏覽器從未有過模組系統。 每個主要決策（如模組系統）必須首先由 ECMAScript 標準化，然後由瀏覽器實施。

這個標準化過程在 ES6 中完成，瀏覽器開始實施這個標準，試圖以相同的工作方式保持一致性，，現在 Chrome，Safari，Edge 和 Firefox（從 60 版本開始）支援ES 模組。

模組非常酷，因為它們允許你封裝各種功能，並將這些功能作為庫公開給其他 JavaScript 檔案。

ES 模組語法

匯入一個模組可以用 import ：

import package from 'module-name'

然而 CommonJS 使用：

const package = require('module-name')

一個模組是一個 JavaScript 檔案，通過 export 匯出一個或多個值（物件，函式或變數）。舉個例子，這個模組模組匯出一個返回字串大寫的函式：

uppercase.js 檔案:

export default str => str.toUpperCase()

在此示例中，模組定義了單個預設匯出( default export )，因此它可以是匿名函式。 否則，它需要一個名稱來區分其它的匯出。

現在，任何其他 JavaScript 模組都可以通過 import 來匯入 uppercase.js 提供的功能。

HTML頁面可以使用帶有特殊 type="module" 屬性的 <script> 標記新增模組：

<script type="module" src="index.js"></script>

注意：此模組匯入的行為類似於 defer 指令碼載入。請參閱 詳解 script 標籤(async,defer,integrity,crossorigin 和 onerror 屬性)

特別要注意：任何使用 type="module" 載入的指令碼都是以 嚴格模式(strict mode) 載入的。

在這個例子中， uppercase.js 模組定義了一個預設匯出，所以當我們匯入這個模組時，可以為它指定一個你自己喜歡的名稱：

import toUpperCase from './uppercase.js'

然後我們可以使用它：

toUpperCase('test') //'TEST'

你還可以使用絕對路徑來匯入模組，以便引用其它域名中定義的模組：

import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'

這種匯入語法也是有效的：

import { foo } from '/uppercase.js'
import { foo } from '../uppercase.js'

但是下面的匯入語法是無效的：

import { foo } from 'uppercase.js'
import { foo } from 'utils/uppercase.js'

路徑必須是絕對路徑，或在名字前加上 ./ 或者 / 。

其它 匯入(import)/匯出(export) 方法

我們在上面看到了這個例子：

export default str => str.toUpperCase()

上面的程式碼會建立一個預設匯出(export)。但是下面的程式碼我們可以看到，在檔案中，你可以使用以下語法匯出多個內容：

const a = 1
const b = 2
const c = 3

export { a, b, c }

另一個模組可以使用以下程式碼匯入所有上面這些匯出：

import * from 'module'

你可以使用解構分配僅匯入其中一些匯出：

import { a } from 'module'
import { a, b } from 'module'

為方便起見，你可以使用 as 重新命名任何匯入(import)：

import { a, b as two } from 'module'

你可以按名稱 匯入(import) 預設匯出(default export) 和任何 非預設匯出(non-default export)，例如常見的 React 匯入：

import React, { Component } from 'react'

你可以在 此處 檢視 ES 模組的示例。

跨域資源共享 CORS

通過 CORS 獲取模組，意味著如果你從其它域名引入指令碼，他們必須有一個有效的 CORS 頭允許跨站點載入（像 Access-Control-Allow-Origin: * ）。

不支援模組的瀏覽器怎麼辦？

結合使用 type=module 和 nomodule ：

<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

總結

ES模組是現代瀏覽器中引入的最大功能之一。 他們是ES6的一部分，但實施它們的道路還很漫很長。

我們現在可以使用它們了！ 但我們還必須記住，擁有多個模組會對我們的頁面產生效能影響，因為這是瀏覽器必須在執行時執行的一步。

即使 ES 模組已經瀏覽器中可用，可很大程度上依然要依靠webpack ，但是直接用語言構建這樣的功能對於統一模組在客戶端和 Node.js 上的工作方式來說是巨大的挑戰。

更多完整的 ES6 Modules(模組) 介紹請檢視 ES6 Modules(模組)系統及語法詳解