了解JavaScript中的ES模塊

作者：方章和翻譯 2020-07-09 08:01:48

開發前端

模塊在每個編程語言中都能找到。它是一種能在一個代碼塊中引入另一個代碼的模塊功能的方法。這些模塊是開發人員開發的具有特定功能的代碼，可以在項目其他地方重復使用。模塊化為你提供了一些好處，比如代碼的可復用性和模塊化。

[[332921]]

本文轉載自微信公眾號「新鈦云服」，作者方章和翻譯。轉載本文請聯系新鈦云服公眾號。

如果你之前一直在使用JavaScript開發代碼，你就會知道早期的JavaScript沒有這樣的模塊功能。開發者為了將js文件加載到他們的頁面中，不得不使用HTML <script>標簽。直到后來，幾種模塊定義規范才開始出現。

CommonJS — Node.js中使用的module.export和require語法
Asynchronous Module Definition (AMD)
Universal Module Definition (UMD)
ES Modules

首先，我們先來看下為什么需要這些模塊化定義的規范

為什么我們需要模塊化

每當你思考程序是如何工作的，其實它們所做的就是變量管理。它為變量賦值，修改變量，將兩個變量組合在一起等等。但是當變量的數量隨著你的應用程序的規模而增加時，你會發現你的代碼管理起來會非常麻煩。

解決這個問題的方法是只需要考慮幾個變量。JavaScript實現這一目標的方式被稱為作用域。由于JavaScript中的作用域定義方式導致函數不能訪問其他函數中定義的變量。雖然這使得你的變量不能被其他函數訪問，但這又引起了另一個問題--你很難在不同函數之間共享變量。解決這個問題就是將它們定義在全局作用域上。

雖然這種方法可以解決問題，但并不推薦。你的腳本標簽應該按照正確的順序，你必須確保沒有人改變這個順序。如果順序確實發生了變化，你的應用程序將拋出一個錯誤。這使得代碼管理變得很棘手。你永遠不知道什么會破壞什么。任何函數都可以訪問，所以你不知道哪些函數依賴于哪些腳本。

另一個問題是，在該全局范圍內的每一部分代碼都可以被其它代碼改變。這將允許惡意的和非惡意的代碼訪問甚至修改你的全局變量，無論是否有惡意。

所以需要引入模塊來幫助克服這些問題。

模塊化是如何優雅的解決這個問題的

模塊可以讓你更好地組織和管理變量和函數。通常情況下，屬于同一功能的函數和變量會被放在一個模塊中。這就把這些變量放到了模塊作用域中。模塊作用域可以用來在模塊中的函數之間共享變量。

這也使得變量也可以為其他模塊所用。他們可以明確的說哪些變量、類或函數應該對外部模塊可用。這就是所謂的導出。一旦你有了一個導出，其他模塊就可以明確地說它們依賴于該變量、類或函數。由于這種明確的關系，你將知道如果你刪除一個模塊，哪些模塊將被破壞。

一旦你能夠導入和導出變量和函數，你就可以更容易地將你的代碼分割和分解成可以獨立工作的代碼塊。你以后可以通過使用這些模塊來構建你的應用程序，類似于用樂高積木來構建。

為了實現這個超級有用的功能，已經多次嘗試用JavaScript添加模塊功能。

現有的模塊化系統

CommonJS

CommonJS是NodeJS一直在使用的。使用Node，你會得到CommonJS的module.exports和require并可以直接使用。但是，與Node不同的是，瀏覽器并不支持CommonJS。此外，CommonJS會同步加載模塊，因此對于瀏覽器來說，它不是一個最佳的解決方案。你可以使用Webpack或Browserify等打包程序來解決這個問題。

//   filename: bar.js 
 
//   dependencies 
var $ = require('jquery'); 
 
//   methods 
function myFunction(){}; 
 
//   exposed public method (single) 
module.exports = myFunction;

Asynchronous Module Definition (AMD)

AMD誕生于一群不喜歡CommonJS發展方向的開發者。事實上，AMD在發展初期就從CommonJS中分裂出來了。AMD和CommonJS的主要區別在于AMD是異步加載模塊的。這在瀏覽器中非常受歡迎，因為啟動時間對于良好的用戶體驗至關重要。

//   filename: bar.js 
define(['jquery'], function ($) { 
   //   methods 
   function myFunction(){}; 
 
   //   exposed public methods 
   return myFunction; 
});

由于CommonJS和AMD在各自的領域相當流行，所以需要一個 "通用 "的模式來支持兩種風格。但事實證明，UMD又亂又丑。雖然它確實同時支持AMD和CommonJS，也支持老式的 "全局 "變量定義。

Universal Module Definition (UMD)

什么是ES模塊

眾所周知，JavaScript缺乏一個標準模塊定義規范。因此，在ES6中提出了一個單一的、原生的模塊標準。import和export指令允許程序在不運行代碼的情況下導入導出，從而建立一個完整的模塊依賴關系。

其語法格式還是簡單好用的，并且兼容瀏覽器中的同步和異步操作模式。ES模塊在瀏覽器中很快就可以使用，但在Node.js中，要想出一個向后兼容并能實現增量升級的解決方案就有點難了。在Node.js中，原生的ES模塊在實驗性模塊標志后面長期可用。

下面以ES6模塊為例。

JavaScript

//------ library.js ------ 
export const sqrt = Math.sqrt; 
export function square(x) { 
   return x * x; 
} 
export function diagonal(x, y) { 
   return sqrt(square(x) + square(y)); 
} 
//------ main.js ------ 
import { square, diagonal } from 'library'; 
console.log(square(13)); // 169 
console.log(diagonal(12, 5)); // 13 
const app = document.getElementById("app"); 
app.innerHTML = "<h1>Demo App for ES Modules</h1>"; 
const input = document.getElementById("num"); 
input.addEventListener("change",displaySquare); 
function displaySquare(){ 
var sqrOutput = document.getElementById("sqr"); 
sqrOutput.value = square(input.value); 
}

HTML

<HTML> 
   <head> 
       <title>ES Modules Demo</title> 
   </head> 
   <body> 
       <script type="module" src="./main.js" ></script> 
       <div id="app"></div> 
       <label>Input</label> 
       <input id="num" type="number" placeholder="Enter number here"/> 
      <br> 
      <label>Output</label> 
       <input id="sqr" type="number" disabled style="margin- top:20px"/> 
   </body> 
</HTML>

如上圖所示，在HTML文件中，你需要在腳本標簽中指定type="模塊"，瀏覽器才會將其視為ECMAScript模塊。

兼容性

為了向后兼容，你可以在腳本標簽中包含nomodule（其中加載的JS文件是單個打包文件）。支持ES模塊的瀏覽器會知道忽略這一點。這個解決方案即使在最老的瀏覽器中也能使用。Willem的回答已經很好的解釋了這個問題。

在上面的方案中，我們會在HTML中加入這樣的內容。

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

如果你是在本地測試，你將需要在服務器上運行這個，因為你會遇到CORS問題。請在這里閱讀更多信息。模塊以絕對或相對引用導入，必須以"/"、"./"或"./"開頭。

注意：

動態導入

最新的ES2020版本確實帶有動態導入功能。要動態導入模塊，導入關鍵字可以作為函數調用。當以這種方式使用時，它會返回一個promise。

import('/modules/library.js') 
.then((module) => { 
   // Do something with the module. 
}); 
//or using await 
let module = await import('/modules/library.js');

關于es模塊的詳細兼容性可以參考這里 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#import以及https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#export

您是否應該選擇使用ES模塊？

對于瀏覽器來說，ES模塊是新的標準。可以開箱即用的異步模塊加載功能，你可以獲得更快的啟動時間以更好的性能。雖然您可以在瀏覽器中使用CommonJS與一些額外的插件，但強烈建議您切換到ES模塊，因為它們是瀏覽器中的原生模塊。

ES原生模塊允許您獲得單個模塊的加載，而不是單個打包文件。這是相當有用的，它減少了加載數據的大小。瀏覽器對原生模塊的兼容性也很重要，因為它決定了原生的ES模塊是否會被實現，或者我們是否會回退到我們的模式，它將加載一個單一的文件。當你得到一個單一的bundle文件時，其中一個問題是，當你的應用程序變得更大時，bundle js文件的大小也會增加，從而影響啟動時間和性能。你可以通過使用代碼拆分來避免這個問題，這是現代打包器（如webpack）中的一個功能。但在某些情況下，我們可能會選擇模塊打包器，如webpack而不是ES模塊。如果你有CSS、圖像、字體等資產，甚至是XML、CSV等數據文件，你可能會選擇webpack解決方案，因為webpack提供了文件打包功能。

你還應該考慮到瀏覽器對HTTP2的支持。當你使用本地模塊時，你的瀏覽器會單獨加載這些模塊。但在HTTP2的幫助下，我們可以用一個連接同時服務多個請求，而不是發送多個HTTP請求。根據CanIUse的數據，96.49%的瀏覽器使用HTTP2。

但是當你開發一個應用程序時，即使是剩下的3.51%也應該滿足，那么你可能會想改用webpack。這是因為如果你堅持使用原生的ES模塊，你的應用程序將需要發送幾個HTTP請求來加載每個單獨的模塊。

在Node中，情況就完全不同了。由于該功能仍被標記為實驗性的，所以你最好堅持使用CommonJS。不過你還是可以嘗試一下ES模塊。你可以在這里查看上面例子的源代碼。你也可以在這里查看實時演示。我希望你明白什么是ES模塊，以及為什么需要它們。

責任編輯：武曉燕來源：新鈦云服

JavaScript ES 模塊