js中common.js和ECMAScript.js区别对比分析

1. 执行代码 → 2. 构建模块对象 → 3. 按需加载依赖 → 4. 包裹成函数执行

function (exports, require, module, __filename, __dirname) {
  // 用户代码在此执行
  module.exports = ...;
}

1. 解析阶段 → 2. 建立模块关系图 → 3. 编译阶段 → 4. 实例化 → 5. 执行代码

// CommonJS 动态修改
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结束');
// 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结束');

# 执行结果：
a开始 → b开始 → 在b中，a.done = false → b结束 → 在a中，b.done = true → a结束

// 在 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入口
  }
}

# 转换步骤示例
ESM → 解析为AST → 检测import/export → 替换为require语法 → 添加helper函数

// 原始ESM
import { readFile } from 'fs';
export const data = readFile('./file.txt');
// 转换后CommonJS
const { readFile } = require('fs');
exports.data = readFile('./file.txt'); 

require(condition ? 'a' : 'b'); // 无法静态分析

// webpack利用静态分析实现的特性
import(/* webpackPrefetch: true */ './chart'); // 预取
import(/* webpackChunkName: "utils" */ './utils'); // 分块命名

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

# 推荐双模式发布
lib/
├── esm/       # ESM版本（支持Tree-shaking）
├── cjs/       # CommonJS版本 
└── index.d.ts # 类型声明