1. 執(zhí)行代碼 → 2. 構(gòu)建模塊對(duì)象 → 3. 按需加載依賴 → 4. 包裹成函數(shù)執(zhí)行

function (exports, require, module, __filename, __dirname) {
  // 用戶代碼在此執(zhí)行
  module.exports = ...;
}

1. 解析階段 → 2. 建立模塊關(guān)系圖 → 3. 編譯階段 → 4. 實(shí)例化 → 5. 執(zhí)行代碼

// CommonJS 動(dòng)態(tài)修改
exports.a = 1;        // ? { a: 1 }
module.exports = { b: 2 };  // 最終導(dǎo)出 { b: 2 }
// ESM 綁定不可變
export let count = 0;
export function increment() {
  count++;  // 所有導(dǎo)入模塊都會(huì)看到更新后的值
}

// commonjs/a.js
console.log('a開始');
exports.done = false;
const b = require('./b');  // 此時(shí)b尚未完成加載
console.log('在a中，b.done =', b.done);
exports.done = true;
console.log('a結(jié)束');
// commonjs/b.js
console.log('b開始');
exports.done = false;
const a = require('./a');  // 此時(shí)a導(dǎo)出{done: false}
console.log('在b中，a.done =', a.done);
exports.done = true;
console.log('b結(jié)束');

# 執(zhí)行結(jié)果：
a開始 → b開始 → 在b中，a.done = false → b結(jié)束 → 在a中，b.done = true → a結(jié)束

// 在 ESM 中引入 CJS
import cjsModule from './commonjs-module.cjs';
// 在 CJS 中引入 ESM（需異步）
const esModule = await import('./es-module.mjs');

{
  "type": "module",       // 默認(rèn)使用ESM
  "main": "./index.cjs",  // CJS入口
  "exports": {
    "import": "./esm/index.js",   // ESM入口
    "require": "./cjs/index.js"   // CJS入口
  }
}

# 轉(zhuǎn)換步驟示例
ESM → 解析為AST → 檢測(cè)import/export → 替換為require語(yǔ)法 → 添加helper函數(shù)

// 原始ESM
import { readFile } from 'fs';
export const data = readFile('./file.txt');
// 轉(zhuǎn)換后CommonJS
const { readFile } = require('fs');
exports.data = readFile('./file.txt'); 

require(condition ? 'a' : 'b'); // 無(wú)法靜態(tài)分析

// webpack利用靜態(tài)分析實(shí)現(xiàn)的特性
import(/* webpackPrefetch: true */ './chart'); // 預(yù)取
import(/* webpackChunkName: "utils" */ './utils'); // 分塊命名

<!-- 瀏覽器直接使用ESM -->
<script type="module" src="app.js"></script>

# 推薦雙模式發(fā)布
lib/
├── esm/       # ESM版本（支持Tree-shaking）
├── cjs/       # CommonJS版本 
└── index.d.ts # 類型聲明