看了不少關(guān)于這個話題的文章，很多都說不清楚，老是Get不到重點。下面就把他們總結(jié)一下，讓大家不再疑惑。
開始的時候，JavaScript沒有import/export 模塊的方法。這是個很大的問題，想想如果現(xiàn)在讓你把所有代碼寫在一個文件里，會是什么情況，你愿意去維護(hù)么？
然后一些天才想了不同的方法把模塊系統(tǒng)引入了JavaScript。最出名的就是這些，CJS, AMD, UMD, ESM
下面來從這些方面一一介紹他們：語法，目的和基本的行為。
CJS
CJS是CommonJS的縮寫。它看起來像下圖：
- 如果你用過Node.js的話，應(yīng)該很熟悉這種語法，它就是Node.js的模塊系統(tǒng)
- CJS是同步引入模塊
- 你可以從一個文件，或者node_modules引入模塊，下面兩種都可以
- 當(dāng)使用CJS引入，它會給你一個被引入對象的拷貝
- CJS不被瀏覽器支持，只能用于后端。如果要在前端使用，必須要先被編譯和打包。
AMD
AMD是Asynchronous Module Definition的縮寫。示例代碼如下：
或者
- AMD是通過異步的方式引入模塊的
- AMD是為前端設(shè)計的
- AMD 語法不如 CJS 直觀
UMD
UMD是Universal Module Definition的縮寫，示例代碼如下：
- UMD可以在前端和后端同時工作。（估計這就是Universal的由來吧，通用）
- UMD更像是一種配置多個模塊系統(tǒng)的模式。
- UMD通常用于打包工具打包后的代碼實現(xiàn)，比如Rollup/Webpack之類的
ESM
ESM代表EcmaScript Module。它是JavaScript規(guī)范最新提出的模塊系統(tǒng)。你肯定見過這種樣子的代碼：
- ESM被現(xiàn)代瀏覽器原生支持
- 它語法簡單(像CJS)，并且是異步導(dǎo)入(像AMD)，有它倆共同的優(yōu)點
- 由于ES6的靜態(tài)模塊結(jié)構(gòu)，它可以做Tree-shakeable。那些打包工具，比如Rollup可以幫你刪掉無用代碼，這樣你就能得到更精簡的build，從而提高性能。
- 它還可以被使用在HTML里，比如下面這樣
總結(jié)
- ESM 是最好的模塊系統(tǒng)。它語法簡單，原生異步并且可以Tree-shakeable
- UMD 前后端通用，可以作為不支持ESM環(huán)境的替代系統(tǒng)。
- CJS 是同步的，可以在后端使用。
- AMD 是異步的，可以在前端使用。
鄭重聲明：本文內(nèi)容及圖片均整理自互聯(lián)網(wǎng)，不代表本站立場，版權(quán)歸原作者所有，如有侵權(quán)請聯(lián)系管理員(admin#wlmqw.com)刪除。
