JavaScript 中的 ESM（ES Modules）和 CJS（CommonJS）是用於模塊化開發的兩種不同的模組系統。
關於CJS
CJS 是 CommonJS 的模塊系統，最初是為了在伺服器端使用的 Node.js 開發而設計的，但也被廣泛用於前端開發。CJS 使用 require 函數來導入模塊，並使用 module.exports 或 exports 對象來定義導出的內容，例如：// 定義模塊
// math.js
exports.add = function(a, b) {
return a + b;
};
// 導入模塊
// main.js
var math = require('./math.js');
console.log(math.add(2, 3)); // 輸出: 5
關於ESM
ESM 是 ECMAScript 的模塊系統，從 ECMAScript 6（ES6）開始引入並成為 JavaScript 的一部分。ESM 使用 import 和 export 關鍵字來定義和導入模塊。例如：
// 定義模塊
// math.js
export function add(a, b) {
return a + b;
}
// 導入模塊
// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 輸出: 5
兩者差異之處
ESM 和 CJS 在語法和用法上有一些不同之處，主要區別如下：
- 語法：ESM 使用 import 和 export，而 CJS 使用 require 和 module.exports 或 exports。
- 加載時間：ESM 是靜態加載，即在編譯時就可以確定模塊的依賴關係；而 CJS 是動態加載，即在運行時根據需要動態加載模塊。
- 運行環境：ESM 可以在現代瀏覽器中使用，但需要在 <script> 標籤上使用 type="module" 屬性；而 CJS 主要用於 Node.js 環境。
- 預設導出：ESM 支援預設導出，可以使用 export default，而 CJS 沒有內建的預設導出機制。
需要注意的是，ESM 和 CJS 是不相容的模塊系統，即不能直接在 ES6 模塊和 CommonJS 模塊之間進行導入和導出。
這也就是為什麼衍生了許多的轉換套件， 例如 Babel 或 webpack…。
目前主流
目前主流的模塊系統是 ESM（ES Modules）。
ESM 是 JavaScript 的官方模塊系統，自 ECMAScript 6（ES6）開始引入並成為語言的一部分。
它在現代瀏覽器中得到廣泛支援，同時也可以在 Node.js 環境中使用（從 Node.js 12 版本開始原生支援）。
相較於CJS之下有以下的優勢:
- 靜態加載：ESM 在編譯時就可以確定模塊的依賴關係，這使得瀏覽器可以更有效地進行模塊的加載和緩存，提高應用程序的性能。
- 非阻塞加載：ESM 的加載是非阻塞的，這意味著當瀏覽器遇到 <script type="module"> 標籤時，它可以繼續解析後面的 HTML，而不需要等待模塊加載完成。
- 預設導出：ESM 支援預設導出，可以使用 export default 導出模塊的預設內容，這使得導入模塊時可以更簡潔。
隨著時代的演進也開始慢慢的走向ESM模組，剛入門的開發者也可以考慮直接以ESM模組來進行學習。
