【程式語言 - Javascript】 ESM與CJS

2023/07/01閱讀時間約 3 分鐘

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模組來進行學習。

為什麼會看到廣告