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

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

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

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

// commonjs/a.js
console.log('a開始');
exports.done = false;
const b = require('./b');  // 此時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');  // 此時a導出{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",       // 默認使用ESM
  "main": "./index.cjs",  // CJS入口
  "exports": {
    "import": "./esm/index.js",   // ESM入口
    "require": "./cjs/index.js"   // CJS入口
  }
}

# 轉(zhuǎn)換步驟示例
ESM → 解析為AST → 檢測import/export → 替換為require語法 → 添加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'); // 無法靜態(tài)分析

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

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

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