JavaScript 模組在組織程式碼、增強可重複使用性和提高應用程式的可維護性方面發揮著至關重要的作用。廣泛使用的兩個主要模組系統是 CommonJS (CJS) 和 ECMAScript Modules (ESM)。了解它們的差異和能力是專案中有效利用它們的關鍵。

CommonJS (CJS)

CommonJS 是最初為 Node.js 環境設計的模組系統。它強調模組的簡單性和同步載入。

CommonJS 匯出/匯入模組

CommonJS 中的模組使用 module.exports 匯出值、物件或函數。

1.預設匯出/匯入

// logger.js
function log(message) {
    console.log(message);
}

module.exports = log; // Default export

// index.js
const log = require('./logger');

log('This is a log message.'); // Output: This is a log message.

2.指定匯出/匯入

// math.js
function add(a, b) {
    return a   b;
}

function subtract(a, b) {
    return a - b;
}

module.exports = { add, subtract }; // Named exports

// index.js
const { add, subtract } = require('./math');

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

ECMAScript 模組 (ESM)

ESM，在 ES6 (ES2015) 中引入，是 JavaScript 的標準化模組系統。它支援同步和非同步模組加載，並且在現代瀏覽器和具有某些配置的 Node.js 中原生支援。

ECMAScript 匯出模組

ESM 使用匯出語句匯出值、物件或函數。

1.預設匯出/匯入

// utils.mjs (Note the .mjs extension for ESM)
function formatName(name) {
    return `Mr./Ms. ${name}`;
}

export default formatName;

// index.mjs
import formatName from './utils.mjs';

console.log(formatName('John')); // Output: Mr./Ms. John

2.命名導出

// operations.mjs
export function multiply(a, b) {
    return a * b;
}

export function divide(a, b) {
    return a / b;
}

// index.mjs
import { multiply, divide } from './operations.mjs';

console.log(multiply(4, 2)); // Output: 8
console.log(divide(10, 2)); // Output: 5

3. ECMAScript 模組中的混合導出樣式

// mixedExports.mjs
function greet(name) {
    return `Hello, ${name}!`;
}

export default greet;

export function goodbye(name) {
    return `Goodbye, ${name}!`;
}

// index.mjs
import sayHello, { goodbye } from './mixedExports.mjs';

console.log(sayHello('Alice')); // Output: Hello, Alice!
console.log(goodbye('Bob')); // Output: Goodbye, Bob!

CommonJS 和 ESM 之間的主要區別

• 語法：CommonJS使用require()和module.exports，而ESM使用導入和導出語句。
• 載入：CommonJS模組是同步載入的，而ESM支援同步和非同步載入。
• 環境：CommonJS主要用於Node.js，而ESM在瀏覽器中原生支持，並且可以透過特定配置（--experimental-modules標誌或.mjs檔案副檔名）在Node.js中使用。

相容性和使用

• Node.js：CommonJS 由於其在 Node.js 環境中的長期支援和簡單性而仍然流行。
• 瀏覽器：ESM 越來越受歡迎，因為瀏覽器越來越支援它，提供更好的效能和模組化程式碼載入。

結論

在 CommonJS 和 ECMAScript 模組之間進行選擇取決於您的專案環境和要求。雖然 CommonJS 對於 Node.js 後端開發來說非常強大，但 ESM 提供了跨瀏覽器和現代 Node.js 應用程式的互通性。了解這些模組系統使開發人員能夠有效地利用 JavaScript 的模組化功能。

透過利用 CommonJS 或 ESM，開發人員可以增強程式碼組織、提高專案可擴展性並促進 JavaScript 專案中的協作。