一文读懂：CommonJS 和 ES Module 的本质区别

江隅

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

面试官：你能说说 CommonJS 和 ES Module 的区别吗？
我：……（脑子里只剩下 require 和 import）

说实话，这个问题你一定见过，而且99% 的前端都背过标准答案。
但真要往深了问一句：

1. 为什么 ESM 可以 Tree Shaking？CommonJS 不行
2. 为什么 ESM 的 import 是“只读的”？

很多人，当场就开始“CPU 过载”。

于是我决定直接把底层逻辑捋清楚，以下就是我对 CommonJS 和 ES Module 一次系统性深挖的记录。

一、什么是 CommonJS？它解决了什么问题？

1. CommonJS 的诞生背景

在早期 JavaScript 只有浏览器环境时，是没有模块系统的：

• 全局变量污染
• 文件之间依赖混乱
• 无法复用代码

于是 Node.js 社区提出了一套解决方案：CommonJS（CMJ） 。

👉 注意：CommonJS 是社区标准，不是官方语言层面的规范。

CommonJS 的核心特征

• ✅ 社区标准
• ✅ 使用函数实现（require）
• ✅ 仅 Node 环境支持
• ✅ 动态依赖，同步执行

---

2. CommonJS 为什么叫“动态依赖”？

来看一段最典型的代码：

const moduleName = './a.js';
const a = require(moduleName);

这里的依赖路径，是不是运行时才能确定？这就是动态依赖；

CommonJS 的依赖关系，必须等代码执行时才能知道。

---

3. require 到底做了什么？（核心原理）

你在 Node 中写的：

const a = require('./a.js');

但如果我追问一句：require 加载的模块代码，是“直接执行”的吗？ 模块里的 this、exports、module.exports 到底从哪来的？

答案其实藏在 Node.js 对模块的一层“函数包装”里:

function require(path) {
   const cache = {}
  // 1. 如果模块已经加载过，直接返回缓存
  if (cache[path]) {
    return cache[path].exports;
  }

  // 2. 创建模块对象
  const module = {
    id:path
    exports: {}
  };

  // 3. 执行模块代码（用函数包一层）
  function _run(exports, require, module, __filename, __dirname) {
    // 模块源码在这里执行
  }

  _run.call(
    module.exports,
    module.exports,
    require,
    module,
    __filename,
    __dirname
  );

  // 4. 缓存并返回结果
  cache[modulePath] = module;
  return module.exports;
}

假设你有一个文件 a.js,那么文件中的内容会放到上面的_run函数中执行

我们拆开来看：

在模块初始化阶段，这三个引用的是同一个对象。

所以以下判断永远成立：

console.log(arguments); // [exports, require ,module, __filename, __dirname]
console.log(this); // {}
console.log(this === exports); // true
console.log(exports === module.exports); // true

重点来了：

• require 是一个普通函数
• module.exports 是一个普通对象
• 模块执行是同步的
• 导出的值是一次性的值拷贝

---

二、ES Module：语言层面的模块系统

如果说 CommonJS 是“工具方案”，那么 ES Module（ESM）就是 JavaScript 官方给出的答案。

ES Module 的核心关键

• ✅ 官方标准（ECMAScript）
• ✅ 使用新语法（import / export）
• ✅ 所有环境支持（浏览器 / Node / Deno）
• ✅ 同时支持静态依赖 & 动态依赖
• ✅ 符号绑定

1. 什么是「静态依赖」？

import { a } from './a.js';

这行代码有两个关键点：

1. import只能写在顶层
2. 依赖路径在代码运行前就确定

👉 这意味着什么？

• 构建工具在编译阶段就能分析依赖
• 支持Tree Shaking
• 可以做代码分割、预加载

这也是为什么 ESM 更适合前端工程化。

---

2. ESM 也支持动态依赖，但它是异步的

import('./a.js').then(module => {
  console.log(module.a);
});

和 CommonJS 最大的不同点：

3. 符号绑定：ESM 最容易被忽略

这是 ESM 和 CommonJS 的本质区别。

看一段代码

// a.js
export var a = 1;
export function changeA() {
  a = 2;
}

// index.js
import { a, changeA } from './a.js';
console.log(a); // 1
changeA();
console.log(a); // 2

这里为什么 a 会跟着变化？

真相就是 import 不是赋值，而是“引用同一个符号”

在 ESM 中： 导入的不是值，而是对导出符号的实时绑定

可以理解为：

• a 在模块内部是一个变量
• 所有 import 的地方，都指向同一个 a
• 修改它，所有地方同步变化

这就是「符号绑定（Live Binding）」。

---

对比 CommonJS（非常关键)

// a.js
var n = 1;
function changeN() {
  n = 2;
}
module.exports = {
  n,
  changeN
}

// b.js
const { n, changeN } = require('./a.js');
console.log(n); // 1
changeN();
console.log(n); // 1

这里的 n：

• 是一次值拷贝
• 后续模块内部怎么改，外面都不会同步

---

4. 再看下 下面几个问题

(1) export 和 export default 的区别

• export：具名导出，可多个
• export default：默认导出，只能一个
• 默认导出本质是 { default: xxx }

(2) 下面代码导出了什么？

exports.a = 'a';
module.exports.b = 'b';
this.c = 'c';
module.exports = {
  d: 'd'
};

结果：

{ d: 'd' }

(3)下面代码导出了什么？

exports.a = 1;  
exports = { b: 2 };

结果：

{ a: 1 }

原因是：

• exports 只是 module.exports 的一个引用
• 当你重新给exports赋值时,只是断开了引用关系module.exports 并没有变
• 等价于 let exports = module.exports; exports = {}; 只是改了局部变量

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

来源：https://www.cnblogs.com/smileZAZ/p/19646596