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

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

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

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

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

✅ 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 中的现实差异

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