我讀過很多關(guān)于這個(gè)主題的文章，但其中很多都不清楚，而且我總是抓住要點(diǎn)。下面我們就來總結(jié)一下，免得大家再困惑。最初，JavaScript 無法導(dǎo)入/導(dǎo)出模塊。這是一個(gè)大問題。想象一下如果要求您將所有代碼寫入一個(gè)文件中會發(fā)生什么。你愿意維護(hù)它嗎？然后一些天才想到了一種不同的方法將模塊系統(tǒng)引入JavaScript。最著名的是這些，CJS、AMD、UMD、ESM。我們從語法、用途和基本行為這幾個(gè)方面一一介紹一下。 CJSCJS 是CommonJS 的縮寫。如下圖所示：

如果你使用過Node.js，你應(yīng)該熟悉這個(gè)語法。它是Node.js 的模塊系統(tǒng)。 CJS同步導(dǎo)入模塊。您可以從文件或node_modules 導(dǎo)入模塊。以下兩者都可以使用CJS 導(dǎo)入。它將為您提供導(dǎo)入對象的副本。 CJS不被瀏覽器支持，只能在后端使用。如果要在前端使用，必須先編譯打包。 AMDAMD 是異步模塊定義的縮寫。示例代碼如下：

或者

AMD 以異步方式引入模塊。 AMD是為前端而設(shè)計(jì)的。語法不如CJS 直觀。 UMDUMD 是通用模塊定義的縮寫。示例代碼如下：

UMD可以在前端和后端工作。 （我猜這就是Universal、通用的由來）UMD更像是一種配置多模塊系統(tǒng)的模式。 UMD通常用于打包工具打包后的代碼實(shí)現(xiàn)，例如Rollup/Webpack等。ESMESM代表EcmaScript Module。它是JavaScript規(guī)范提出的最新模塊系統(tǒng)。您一定見過類似這樣的代碼：

現(xiàn)代瀏覽器本身就支持ESM。它具有簡單的語法（如CJS）并且是異步導(dǎo)入的（如AMD）。它具有兩者的共同優(yōu)點(diǎn)。由于ES6的靜態(tài)模塊結(jié)構(gòu)，它可以進(jìn)行tree-shakeable。那些打包工具，比如Rollup，可以幫助你刪除無用的代碼，這樣你就可以獲得更精簡的構(gòu)建，從而提高性能。也可以用在HTML 中，總結(jié)如下

ESM是最好的模塊系統(tǒng)。它具有簡單的語法，本質(zhì)上是異步的，并且可以用作Tree-shakeableUMD 前端和后端。它可以用作不支持ESM 環(huán)境的替代系統(tǒng)。 CJS是同步的，可以在后端使用。 AMD是異步的，可以用在前端。