Node的CJS與ESM有哪些不同點

Node的CJS與ESM有哪些不同點

在Node.js中，模塊系統主要有兩種：CommonJS（CJS）和ECMAScript Modules（ESM）。這兩種模塊系統在語法、加載方式、兼容性等方面存在顯著差異。本文將詳細探討CJS與ESM的不同點。

1. 語法差異

CommonJS (CJS)

CommonJS是Node.js最早采用的模塊系統，使用require和module.exports來導入和導出模塊。

// 導出模塊
module.exports = {
  foo: 'bar'
};

// 導入模塊
const myModule = require('./myModule');
console.log(myModule.foo); // 輸出: bar

ECMAScript Modules (ESM)

ESM是JavaScript的標準模塊系統，使用import和export來導入和導出模塊。

// 導出模塊
export const foo = 'bar';

// 導入模塊
import { foo } from './myModule.js';
console.log(foo); // 輸出: bar

2. 加載方式

CommonJS (CJS)

CJS是同步加載模塊的，這意味著模塊在require時會被立即加載和執行。

const fs = require('fs');
const data = fs.readFileSync('./file.txt', 'utf8');
console.log(data);

ECMAScript Modules (ESM)

ESM是異步加載模塊的，這意味著模塊在import時會被異步加載和執行。

import { readFile } from 'fs/promises';

async function readData() {
  const data = await readFile('./file.txt', 'utf8');
  console.log(data);
}

readData();

3. 文件擴展名

CommonJS (CJS)

CJS模塊通常使用.js作為文件擴展名。

// myModule.js
module.exports = {
  foo: 'bar'
};

ECMAScript Modules (ESM)

ESM模塊通常使用.mjs作為文件擴展名，或者在package.json中指定"type": "module"。

// myModule.mjs
export const foo = 'bar';

或者在package.json中指定：

{
  "type": "module"
}

4. 兼容性

CommonJS (CJS)

CJS是Node.js的默認模塊系統，因此在所有版本的Node.js中都得到支持。

ECMAScript Modules (ESM)

ESM在Node.js 12及以上版本中得到支持，但在某些情況下可能需要額外的配置或使用.mjs擴展名。

5. 動態導入

CommonJS (CJS)

CJS支持動態導入，可以通過require在運行時動態加載模塊。

const moduleName = './myModule';
const myModule = require(moduleName);
console.log(myModule.foo);

ECMAScript Modules (ESM)

ESM也支持動態導入，但需要使用import()函數。

const moduleName = './myModule.js';
import(moduleName).then(myModule => {
  console.log(myModule.foo);
});

6. 頂層await

CommonJS (CJS)

CJS不支持頂層await，必須在異步函數中使用await。

async function main() {
  const data = await someAsyncFunction();
  console.log(data);
}

main();

ECMAScript Modules (ESM)

ESM支持頂層await，可以在模塊的頂層直接使用await。

const data = await someAsyncFunction();
console.log(data);

7. 模塊解析

CommonJS (CJS)

CJS模塊解析是基于文件路徑的，require會按照Node.js的模塊解析規則查找模塊。

const myModule = require('./myModule');

ECMAScript Modules (ESM)

ESM模塊解析是基于URL的，import會按照ESM的模塊解析規則查找模塊。

import { foo } from './myModule.js';

8. 默認導出

CommonJS (CJS)

CJS支持默認導出，可以通過module.exports導出單個值。

module.exports = 'bar';

ECMAScript Modules (ESM)

ESM也支持默認導出，可以通過export default導出單個值。

export default 'bar';

9. 循環依賴

CommonJS (CJS)

CJS在處理循環依賴時可能會導致部分模塊未完全加載。

// a.js
const b = require('./b');
console.log('a:', b);

// b.js
const a = require('./a');
console.log('b:', a);

ECMAScript Modules (ESM)

ESM在處理循環依賴時更加健壯，能夠正確處理未完全加載的模塊。

// a.mjs
import { b } from './b.mjs';
console.log('a:', b);

// b.mjs
import { a } from './a.mjs';
console.log('b:', a);

10. 性能

CommonJS (CJS)

CJS是同步加載的，因此在加載大量模塊時可能會導致性能問題。

ECMAScript Modules (ESM)

ESM是異步加載的，因此在加載大量模塊時性能更好。

結論

CJS和ESM在Node.js中各有優缺點。CJS是Node.js的傳統模塊系統，兼容性好，但同步加載可能導致性能問題。ESM是JavaScript的標準模塊系統，支持異步加載和頂層await，但在某些情況下需要額外的配置。根據項目需求選擇合適的模塊系統是非常重要的。