了解JavaScript中的ES模塊
本文轉載自微信公眾號「新鈦云服」，作者方章和 翻譯 。轉載本文請聯系新鈦云服公眾號。
模塊在每個編程語言中都能找到。它是一種能在一個代碼塊中引入另一個代碼的模塊功能的方法。這些模塊是開發人員開發的具有特定功能的代碼，可以在項目其他地方重復使用。模塊化為你提供了一些好處，比如代碼的可復用性和模塊化。
如果你之前一直在使用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模塊，以及為什么需要它們。
