一：定義

• CommonJS(CJS)：非ECMA官方規(guī)范，用于NodeJS默認加載加載模塊化方式，瀏覽器無法運行，使用**module.exports/require**導入模塊文件。
• ESModule(ESM)：ES6（ECMA）官網標準，瀏覽器 + Node通用模塊化規(guī)范，前端工程主流方案，使用**export/import**導入模塊文件。

二：使用場景

1. 模塊的導入導出

// CJS示例
// a.js
exports.num = 1
// index.js
const { num } = require('./a')

// ESM示例
// a.js
export let num = 1
// 靜態(tài)導入(頂層專用)
import { num } from './a'
// 動態(tài)導入(任意位置，返回Promise)
import('./a').then(res=>{})

2. 加載順序

# CJS：同步加載，會阻塞代碼運行。require是普通函數(shù)，代碼執(zhí)行到當前行才會加載該文件，支持代碼動態(tài)引入。

// CJS合法：if、for、函數(shù)內部任意位置寫require
if(flag){
  const m = require('./mod1')
}else{
  const m = require('./mod2')
}

# ESM靜態(tài)引入：編譯時靜態(tài)解析，提前寫入全部模塊路徑，必須寫在代碼最頂層，代碼同步加載。

// ESM 靜態(tài)文件加載
// 默認 導入
import module from "./xxx"
// 命名 導入
import { module } from "./xxx"
// 全量導入
import  * as module from "./xxx"

# ESM動態(tài)引入：可以運行時異步加載，返回Promise，import()是ES內置函數(shù)，CJS/ESM環(huán)境都能識別，任意位置都能調用，用于路由懶加載、按需引入。

// ESM 動態(tài)導入
import("./xxx")

// Promise
import("./xxx").then(res => {
    // 業(yè)務代碼
})

3. 導出值綁定：值拷貝 vs 實時綁定

# CJS：導出值的副本（淺拷貝），原模塊變量變化不影響導入值

// c.js(CJS)
let count = 1
exports.count = count
exports.add = ()=>count++

// index.js(CJS)
const {count,add}=require('./c')
console.log(count) //1
add()
console.log(count) //1（拷貝快照，原變量變了不更新）

# ESM：導出實時引用綁定，原模塊值變更，導入變量自動同步更新

// e.js(ESM)
export let count =1
export const add = ()=>count++

// index.js(ESM)
import {count,add} from './e'
console.log(count)//1
add()
console.log(count)//2（實時綁定，同步變化）

4. 靜態(tài)優(yōu)化能力（Tree-Shaking 關鍵）

# CJS：無法 Tree-Shaking，運行時動態(tài)解析依賴，打包階段無法剔除未使用代碼，打包體積偏大。

# ESM：支持 Tree-Shaking，編譯時確定導入導出，webpack/rollup 可刪除未被引入的export代碼，精簡打包產物。

5. 頂層 this 與內置變量

# CJS：每個模塊被包裝成閉包函數(shù)，頂層 this = module.exports；

# ESM：頂層 this = undefined，默認開啟嚴格模式use strict。

6. 模塊緩存 & 循環(huán)依賴

# CJS：第一次require加載后緩存module.exports，再次引入直接讀緩存；循環(huán)依賴時返回未完成導出的空對象；

# ESM：通過拓撲排序解析依賴，循環(huán)依賴拿到實時引用，不會返回空對象。

7. 跨規(guī)范互導規(guī)則

ESM import CJS：只能整體默認導入，無法單獨解構 CJS 命名導出。

// cjs模塊：module.exports={a:1,b:2}
import all from './cjs' //?正確，all={a:1,b:2}
import {a} from './cjs' //?報錯，ESM不能解構CJS導出

CJS require ESM：Node 原生不支持同步require(ESM)，直接報ERR_REQUIRE_ESM，只能用await import()異步引入。

三：使用場景總結

# CJS：適用于Node 后端服務、腳手架工具、老項目遺留代碼；

# ESM：適用于前端 Vue/React 項目、瀏覽器原生模塊化、新項目標準選型。

四：小結

• CJS運行時同步加載、值拷貝、無TreeShaking；ESM編譯時靜態(tài)導入 + 動態(tài)import()異步、實時綁定、支持TreeShaking；
• CJS用require/module.exports，ESM用import/export。
• CJS環(huán)境不識別靜態(tài)import，僅兼容import()動態(tài)導入。

到此這篇關于CommonJS(CJS)和ESModule(ESM)有什么區(qū)別的文章就介紹到這了,更多相關CJS和ESM區(qū)別內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論