common.js和es6中模块引l入的区别?

CommonJS（CJS）和 ES6 模块（ESM）是 JavaScript 中两套完全不同的模块规范 ，它们在设计理念、加载机制、运行行为上都有本质区别。

下面从 核心差异 → 运行机制 → 实战影响​ 系统讲清楚。

---

一、最核心的 10 个区别（速览表）

对比项	CommonJS	ES6 Module
诞生背景	Node.js 社区规范	ECMAScript 官方标准
加载方式	运行时同步加载​	编译期静态分析​
导入语法	require()	import
导出语法	module.exports	export
是否静态	❌ 动态	✅ 静态
是否支持 Tree Shaking	❌ 不支持	✅ 支持
模块输出	值的拷贝​	**值的实时引用（活绑定）**​
this 指向	module.exports	undefined
循环依赖	返回"未完成副本"	支持实时绑定
顶层 await	❌ 不支持	✅ 支持（ES2022）

---

二、加载机制的本质差异（最重要）

✅ CommonJS：运行时加载（动态）

const fs = require('fs'); // 执行到这里才加载

• 模块在 代码执行阶段​ 才加载

• require是一个普通函数

• 可以写在条件判断里：

  if (Math.random() > 0.5) {
  require('./a');
  } else {
  require('./b');
  }

✅ 灵活

❌ 无法静态分析

---

✅ ES Module：编译期静态解析

import fs from 'fs';

• 在 代码执行前​ 就被解析

• import是语法，不是函数

• 不能动态写在 if 里

  // ❌ 报错
  if (true) {
  import a from './a';
  }

✅ 可被引擎提前分析

✅ 支持优化（Tree Shaking）

---

三、导出的值：拷贝 vs 实时绑定（非常关键）

1️⃣ CommonJS：值的拷贝

// a.js
let count = 1;
module.exports = { count };

// main.js
const { count } = require('./a');
count++; 
console.log(count); // 2

❗ 导出的 count 是值的快照

---

2️⃣ ES Module：实时绑定（Live Binding）

// a.mjs
export let count = 1;

// main.mjs
import { count } from './a.mjs';
console.log(count); // 1

如果 a.mjs 里改了：

count++;

main.mjs 中 自动变化。

✅ 这是 ESM 最反直觉但最重要的特性

---

四、this 指向差异

// CommonJS
console.log(this === module.exports); // true

// ES Module
console.log(this); // undefined

✅ ESM 强制严格模式

✅ 没有 module 对象

---

五、循环依赖的处理方式

CommonJS：返回"半成品"

// a.js
exports.loaded = false;
const b = require('./b');
exports.loaded = true;

// b.js
exports.loaded = false;
const a = require('./a');
console.log(a.loaded); // false

❌ 可能读到未初始化的值

---

ES Module：支持实时绑定

// a.mjs
import { bLoaded } from './b.mjs';
export let aLoaded = false;
aLoaded = true;

// b.mjs
import { aLoaded } from './a.mjs';
export let bLoaded = false;
bLoaded = true;

✅ 双方都能拿到最终正确值

---

六、Tree Shaking 为什么只支持 ESM？

// utils.js
export function a() {}
export function b() {}

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

✅ 打包工具能确定 b没被用

✅ 可以安全删除

而 CommonJS：

module.exports = { a, b };

❌ 无法确定哪些属性会被访问

❌ 不敢删

---

七、Node.js 中的现实差异

项目	CommonJS	ES Module
文件后缀	.js	.mjs或 "type": "module"
require	✅	❌（默认）
import	❌	✅
__dirname	✅	❌（需手动拼）
顶层 await	❌	✅

Node.js 中混合使用：

// ESM 中引入 CJS
import cjs from './cjs.cjs';

// CJS 中引入 ESM（Node 18+）
import('./esm.mjs').then(...);

---

八、一句话总结

**CommonJS 是为服务端设计的"运行时模块系统"，

ES Module 是为通用 JavaScript 设计的"编译期模块标准"。**

✅ 新项目优先用 ES Module​

✅ **库开发必须支持 ESM（才能 Tree Shaking）**​

✅ Node 生态正在全面迁移到 ESM