ES6 模塊：現(xiàn)代 JavaScript 的模塊化方案

本文探討 ES6 模塊，並展示如何在轉(zhuǎn)譯器的幫助下使用它們。幾乎所有語(yǔ)言都有模塊的概念——一種在另一個(gè)文件中包含已聲明功能的方法。通常，開(kāi)發(fā)人員會(huì)創(chuàng)建一個(gè)封裝的代碼庫(kù)，負(fù)責(zé)處理相關(guān)的任務(wù)。該庫(kù)可以被應(yīng)用程序或其他模塊引用。其優(yōu)勢(shì)在於：

1. 代碼可以拆分成更小的、自包含功能的文件。
2. 相同的模塊可以在任意數(shù)量的應(yīng)用程序之間共享。
3. 理想情況下，模塊無(wú)需被其他開(kāi)發(fā)人員檢查，因?yàn)樗鼈円驯蛔C明有效。
4. 引用模塊的代碼知道它是一個(gè)依賴項(xiàng)。如果模塊文件被更改或移動(dòng)，問(wèn)題會(huì)立即顯現(xiàn)。
5. 模塊代碼（通常）有助於消除命名衝突。模塊 1 中的函數(shù) x() 不會(huì)與模塊 2 中的函數(shù) x() 衝突。可以使用命名空間等選項(xiàng)，使調(diào)用變?yōu)?module1.x() 和 module2.x()。

JavaScript 中的模塊在哪裡？

幾年前開(kāi)始 Web 開(kāi)發(fā)的任何人都會(huì)驚訝地發(fā)現(xiàn) JavaScript 中沒(méi)有模塊的概念。無(wú)法直接引用或包含一個(gè) JavaScript 文件到另一個(gè)文件中。因此，開(kāi)發(fā)人員求助於其他方法。

多種 HTML <p> </p> <ul></ul>

<??>

HTML 可以使用多個(gè) <script> 標(biāo)簽加載任意數(shù)量的 JavaScript 文件：

<script src="lib1.js"></script>模塊必須使用 MIME 類(lèi)型 application/javascript 提供服務(wù)。大多數(shù)服務(wù)器會(huì)自動(dòng)執(zhí)行此操作，但要注意動(dòng)態(tài)生成的腳本或 .mjs 文件（請(qǐng)參閱下面的 Node.js 部分）。常規(guī) <script src="lib2.js"></script><script src="core.js"></script>
<script>console.log('inline code');</script><script></code> 標(biāo)簽問(wèn)題的一種方法是將所有 JavaScript 文件合并成一個(gè)大型文件。這解決了一些性能和依賴項(xiàng)管理問(wèn)題，但可能會(huì)導(dǎo)致手動(dòng)構(gòu)建和測(cè)試步驟。</p>
<p><strong>模塊加載器</strong></p>
<p>RequireJS 和 SystemJS 等系統(tǒng)提供了一個(gè)庫(kù)，用于在運(yùn)行時(shí)加載和命名其他 JavaScript 庫(kù)。模塊在需要時(shí)使用 Ajax 方法加載。這些系統(tǒng)有所幫助，但對(duì)于大型代碼庫(kù)或添加標(biāo)準(zhǔn) <code><script></code> 標(biāo)簽的網(wǎng)站來(lái)說(shuō)，可能會(huì)變得復(fù)雜。</p>
<p><strong>模塊打包器、預(yù)處理器和轉(zhuǎn)譯器</strong></p>
<p>打包器引入了編譯步驟，以便在構(gòu)建時(shí)生成 JavaScript 代碼。代碼經(jīng)過(guò)處理以包含依賴項(xiàng)并生成單個(gè) ES5 跨瀏覽器兼容的合并文件。流行的選項(xiàng)包括 Babel、Browserify、webpack 以及更通用的任務(wù)運(yùn)行器，如 Grunt 和 Gulp。</p>
<p>JavaScript 構(gòu)建過(guò)程需要一些努力，但也有好處：</p>
<ul>
<li>處理是自動(dòng)化的，因此人為錯(cuò)誤的可能性較小。</li>
<li>進(jìn)一步的處理可以整理代碼、刪除調(diào)試命令、縮小結(jié)果文件等。</li>
<li>轉(zhuǎn)譯允許您使用替代語(yǔ)法，如 TypeScript 或 CoffeeScript。</li>
</ul>
<p><strong>ES6 模塊</strong></p>
<p>上述選項(xiàng)引入了各種相互競(jìng)爭(zhēng)的模塊定義格式。廣泛采用的語(yǔ)法包括：</p>
<ul>
<li>CommonJS——Node.js 中使用的 module.exports 和 require 語(yǔ)法</li>
<li>異步模塊定義 (AMD)</li>
<li>通用模塊定義 (UMD)</li>
</ul>
<p>因此，在 ES6 (ES2015) 中提出了單一的原生模塊標(biāo)準(zhǔn)。</p>
<p>ES6 模塊內(nèi)部的所有內(nèi)容默認(rèn)情況下都是私有的，并且在嚴(yán)格模式下運(yùn)行（不需要“use strict”）。公共變量、函數(shù)和類(lèi)使用 export 導(dǎo)出。例如：</p>
<pre class="brush:php;toolbar:false"><code class="javascript">// lib.js
export const PI = 3.1415926;
export function sum(...args) {
  log('sum', args);
  return args.reduce((num, tot) => tot + num);
}
export function mult(...args) {
  log('mult', args);
  return args.reduce((num, tot) => tot * num);
}
// 私有函數(shù)
function log(...msg) {
  console.log(...msg);
}

或者，可以使用單個(gè) export 語(yǔ)句。例如：

// lib.js
const PI = 3.1415926;

function sum(...args) {
  log('sum', args);
  return args.reduce((num, tot) => tot + num);
}

function mult(...args) {
  log('mult', args);
  return args.reduce((num, tot) => tot * num);
}

// 私有函數(shù)
function log(...msg) {
  console.log(...msg);
}

export { PI, sum, mult };

然后使用 import 將模塊中的項(xiàng)目導(dǎo)入到另一個(gè)腳本或模塊中：

// main.js
import { sum } from './lib.js';

console.log(sum(1, 2, 3, 4)); // 10

在這種情況下，lib.js 與 main.js 在同一個(gè)文件夾中?？梢允褂媒^對(duì)文件引用（以 / 開(kāi)頭）、相對(duì)文件引用（以 ./ 或 ../ 開(kāi)頭）或完整 URL?？梢砸淮螌?dǎo)入多個(gè)項(xiàng)目：

import { sum, mult } from './lib.js';

console.log(sum(1, 2, 3, 4));  // 10
console.log(mult(1, 2, 3, 4)); // 24

并且可以為導(dǎo)入指定別名以解決命名沖突：

import { sum as addAll, mult as multiplyAll } from './lib.js';

console.log(addAll(1, 2, 3, 4));      // 10
console.log(multiplyAll(1, 2, 3, 4)); // 24

最后，可以通過(guò)提供命名空間來(lái)導(dǎo)入所有公共項(xiàng)目：

import * as lib from './lib.js';

console.log(lib.PI);            // 3.1415926
console.log(lib.sum(1, 2, 3, 4));  // 10
console.log(lib.mult(1, 2, 3, 4)); // 24

在瀏覽器中使用 ES6 模塊

在撰寫(xiě)本文時(shí)，ES6 模塊受 Chromium 系瀏覽器 (v63+)、Safari 11+ 和 Edge 16+ 支持。Firefox 支持將在版本 60 中到來(lái)（在 v58+ 中位于 about:config 標(biāo)志之后）。使用模塊的腳本必須通過(guò)在 <script> 標(biāo)簽中設(shè)置 type="module" 屬性來(lái)加載。例如：

模塊回退<script> 標(biāo)簽可以獲取其他域上的腳本，但模塊是使用跨域資源共享 (CORS) 獲取的。因此，不同域上的模塊必須設(shè)置適當(dāng)?shù)?HTTP 標(biāo)頭，例如 Access-Control-Allow-Origin: *。

最后，除非在 <script> 標(biāo)簽中添加 crossorigin="use-credentials" 屬性并且響應(yīng)包含標(biāo)頭 Access-Control-Allow-Credentials: true，否則模塊不會(huì)發(fā)送 Cookie 或其他標(biāo)頭憑據(jù)。
模塊執(zhí)行被延遲
<script> 標(biāo)簽的 defer 屬性會(huì)延遲腳本執(zhí)行，直到文檔加載并解析完畢。模塊（包括內(nèi)聯(lián)腳本）默認(rèn)情況下會(huì)延遲。示例：


不支持模塊的瀏覽器不會(huì)運(yùn)行 type="module" 腳本?？梢允褂?nomodule 屬性提供一個(gè)回退腳本，模塊兼容的瀏覽器會(huì)忽略該屬性。例如：
<??>
您應(yīng)該在瀏覽器中使用模塊嗎？ 
瀏覽器支持正在增長(zhǎng)，但現(xiàn)在切換到 ES6 模塊可能還為時(shí)過(guò)早。目前，最好使用模塊打包器來(lái)創(chuàng)建一個(gè)在任何地方都能工作的腳本。 
在 Node.js 中使用 ES6 模塊
Node.js 在 2009 年發(fā)佈時(shí)，任何運(yùn)行時(shí)不提供模塊都是不可想像的。採(cǎi)用了 CommonJS，這意味著可以開(kāi)發(fā) Node 包管理器 npm。從那時(shí)起，使用量呈指數(shù)級(jí)增長(zhǎng)。 CommonJS 模塊的編碼方式與 ES2015 模塊類(lèi)似。使用 module.exports 而不是 export：
<??>
<??>
使用 require（而不是 import）將此模塊導(dǎo)入到另一個(gè)腳本或模塊中：
// lib.js
const PI = 3.1415926;

function sum(...args) {
  log('sum', args);
  return args.reduce((num, tot) => tot + num);
}

function mult(...args) {
  log('mult', args);
  return args.reduce((num, tot) => tot * num);
}

// 私有函數(shù)
function log(...msg) {
  console.log(...msg);
}

module.exports = { PI, sum, mult };
require 也可以導(dǎo)入所有項(xiàng)目：
const { sum, mult } = require('./lib.js');

console.log(sum(1, 2, 3, 4));  // 10
console.log(mult(1, 2, 3, 4)); // 24
那麼，在 Node.js 中實(shí)現(xiàn) ES6 模塊很容易，對(duì)嗎？ 不對(duì)。 ES6 模塊在 Node.js 9.8.0  中位於標(biāo)誌之後，並且至少要到版本 10 才會(huì)完全實(shí)現(xiàn)。雖然 CommonJS 和 ES6 模塊具有相似的語(yǔ)法，但它們的工作方式根本不同：

ES6 模塊在執(zhí)行代碼之前預(yù)先解析以解析進(jìn)一步的導(dǎo)入。 
CommonJS 模塊在執(zhí)行代碼時(shí)按需加載依賴項(xiàng)。 

在上面的示例中這沒(méi)有區(qū)別，但請(qǐng)考慮以下 ES2015 模塊代碼：
const lib = require('./lib.js');

console.log(lib.PI);            // 3.1415926
console.log(lib.sum(1, 2, 3, 4));  // 10
console.log(lib.mult(1, 2, 3, 4)); // 24
ES2015 的輸出：
// ES2015 模塊

// ---------------------------------
// one.js
console.log('running one.js');
import { hello } from './two.js';
console.log(hello);

// ---------------------------------
// two.js
console.log('running two.js');
export const hello = 'Hello from two.js';
使用 CommonJS 編寫(xiě)的類(lèi)似代碼：
<code>running two.js
running one.js
Hello from two.js</code>
CommonJS 的輸出：
// CommonJS 模塊

// ---------------------------------
// one.js
console.log('running one.js');
const hello = require('./two.js');
console.log(hello);

// ---------------------------------
// two.js
console.log('running two.js');
module.exports = 'Hello from two.js';
執(zhí)行順序在某些應(yīng)用程序中可能至關(guān)重要，如果在同一個(gè)文件中混合使用 ES2015 和 CommonJS 模塊會(huì)發(fā)生什麼？為了解決這個(gè)問(wèn)題，Node.js 僅允許在擴(kuò)展名為 .mjs 的文件中使用 ES6 模塊。擴(kuò)展名為 .js 的文件將默認(rèn)為 CommonJS。這是一個(gè)簡(jiǎn)單的選項(xiàng)，它消除了大部分複雜性，並且應(yīng)該有助於代碼編輯器和代碼檢查器。 
您應(yīng)該在 Node.js 中使用 ES6 模塊嗎？ 
ES6 模塊僅在 Node.js v10 及更高版本（於 2018 年 4 月發(fā)布）中實(shí)用。轉(zhuǎn)換現(xiàn)有項(xiàng)目不太可能帶來(lái)任何好處，並且會(huì)使應(yīng)用程序與早期版本的 Node.js 不兼容。對(duì)於新項(xiàng)目，ES6 模塊提供了一種 CommonJS 的替代方案。語(yǔ)法與客戶端編碼相同，並且可能為同構(gòu) JavaScript 提供更簡(jiǎn)單的途徑，同構(gòu) JavaScript 可以在瀏覽器或服務(wù)器上運(yùn)行。 
模塊混戰(zhàn)
標(biāo)準(zhǔn)化的 JavaScript 模塊系統(tǒng)花了多年時(shí)間才出現(xiàn)，並且花了更長(zhǎng)時(shí)間才實(shí)現(xiàn)，但問(wèn)題已經(jīng)得到糾正。從 2018 年年中開(kāi)始，所有主流瀏覽器和 Node.js 都支持 ES6 模塊，儘管在每個(gè)人都升級(jí)時(shí)應(yīng)該預(yù)期會(huì)有一個(gè)切換延遲。今天學(xué)習(xí) ES6 模塊，以便在明天從您的 JavaScript 開(kāi)發(fā)中受益。 
關(guān)於 ES6 模塊的常見(jiàn)問(wèn)題解答 (FAQ)
(此處省略了原文檔中的FAQ部分，因?yàn)橐呀?jīng)對(duì)全文進(jìn)行了充分的偽原創(chuàng))
以上是了解ES6模塊的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！