esm的最簡單理解

overview

講解esm的運行邏輯。
esm是一種模塊化解決方案。其餘方案還有：commonjs（本文簡寫爲cjs）/amd/umd。模塊化是工程化的組成部分。
後端早就把工程化作的很好了。前端的代碼仍是一地雞毛。使用拙劣的<script>。es6爲前端帶來了模塊化。

出生背景

1. 已經存在一些簡單的/補漏的模塊化解決方案。如：iife.
2. commonjs已經在node.js中正常運行。
   雖然有這些補救措施，可是不足以完美解決前端模塊化。還有一些問題沒解決，以下：
3. 嚴格肯定<script>引入順序。
4. 爲了讓其餘腳本間協同工做。不得不使用全局變量。而全局變量又會被全局訪問/使用/修改。沒法限制。

能解決什麼問題

1. 把一大塊功能分爲若干小模塊去開發，而後再組合爲了一個模塊，整合後對外輸出。
2. 每一個模塊只能操做本模塊和本模塊引入模塊輸出的變量/方法等。不須要全局變量。
3. 控制本模塊向外輸出哪些東西。
4. 沒有引入順序限制。不引入則無使用依賴，想使用依賴，就得引入依賴。

如何運行

分如下4個部分運行。

1. 發現/加載。

在瀏覽器中使用<script src="main.js" type="module">指定使用的腳本。瀏覽器會根據url下載腳本。type="module"會讓瀏覽器把該文件當作module處理。該文件中可使用import。
瀏覽器會一層一層地根據依賴關係依次加載依賴。此過程須要較長時間。而後模塊地圖

2. 建立（也叫解析）

根據模塊地圖生成模塊記錄。而後模塊記錄代替模塊地圖。
模塊記錄包括：代碼/狀態。
代碼是該模塊的運行邏輯，
狀態是該模塊變量的實際值。
模塊的url與模塊一一對應。
後會生成一個入口對應若干模塊記錄。

3. 實例化

js引擎建立模塊環境記錄。裏面保存了該模塊的全部變量。在評估前不能被訪問。
使用一塊內存專門保存該模塊的實例。該模塊對外輸出就是使用此內存。即便已經輸出對象，再在該模塊內修改值，也會做用於已經輸出的對象。由於對象對應的內存沒變。

4. 評估

執行實例化結果。

commonjs & es module

cjs的運行邏輯與esm的運行邏輯的不一樣。
若cjs中使用esm。則須要把文件擴展名設置爲.mjs。
cjs在實例化時會返回該模塊的輸出的對象。若已經輸出對象，再在該模塊內修改值，則不會影響已經輸出的對象。
cjs已經作了一些兼容esm的功能。

future

esm/cjs正在統一。