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