一：定義

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

二：使用場景

1. 模塊的導(dǎo)入導(dǎo)出

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

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

2. 加載順序

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

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

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

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

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

// ESM 動(dòng)態(tài)導(dǎo)入
import("./xxx")

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

3. 導(dǎo)出值綁定：值拷貝 vs 實(shí)時(shí)綁定

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

// 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：導(dǎo)出實(shí)時(shí)引用綁定，原模塊值變更，導(dǎo)入變量自動(dòng)同步更新

// 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（實(shí)時(shí)綁定，同步變化）

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

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

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

5. 頂層 this 與內(nèi)置變量

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

# ESM：頂層 this = undefined，默認(rèn)開啟嚴(yán)格模式use strict。

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

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

# ESM：通過拓?fù)渑判蚪馕鲆蕾?，循環(huán)依賴拿到實(shí)時(shí)引用，不會返回空對象。

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

ESM import CJS：只能整體默認(rèn)導(dǎo)入，無法單獨(dú)解構(gòu) CJS 命名導(dǎo)出。

// cjs模塊：module.exports={a:1,b:2}
import all from './cjs' //?正確，all={a:1,b:2}
import {a} from './cjs' //?報(bào)錯(cuò)，ESM不能解構(gòu)CJS導(dǎo)出

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

三：使用場景總結(jié)

# CJS：適用于Node 后端服務(wù)、腳手架工具、老項(xiàng)目遺留代碼；

# ESM：適用于前端 Vue/React 項(xiàng)目、瀏覽器原生模塊化、新項(xiàng)目標(biāo)準(zhǔn)選型。

四：小結(jié)

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

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

最新評論