JavaScript模块化规范有哪些？CommonJS与ES6区别详解

JavaScript模块化规范中，CommonJS和ES6 Module（ESM）是当前实际项目中真正广泛落地的两大主流标准，前者主导Node.js后端生态，后者获现代浏览器与新版Node原生支持，而AMD/CMD已基本退出历史舞台；二者在语法形式（require vs import/export）、加载时机（运行时同步 vs 编译时静态）、值传递机制（拷贝 vs 动态只读引用）以及环境配置（文件后缀、type字段、路径限制等）上存在根本性差异，这些差异不仅影响代码书写习惯，更深刻决定了打包优化能力（如tree-shaking）、运行行为（如循环依赖处理）和跨平台兼容性——新项目应优先采用ES6 Module，纯Node脚本可延续CommonJS，而全栈场景则推荐统一使用ESM并借助构建工具实现平滑适配。

JavaScript模块化主要有四种主流规范：CommonJS、AMD、CMD 和 ES6 Module（ESM）。目前实际项目中真正广泛落地的是 CommonJS（Node.js 默认）和 ES6 Module（现代浏览器与新版 Node.js 原生支持），AMD/CMD 已基本被历史淘汰，仅在极老项目中可见。

语法写法不同

这是最直观的区别：

• CommonJS 用 module.exports 或 exports.xxx 导出，用 require('./x') 导入
• ES6 Module 用 export（命名导出）、export default（默认导出），用 import 导入，且必须写明扩展名（如 .js）或使用完整路径
• CommonJS 的 require 是函数调用，可写在任意位置；ES6 的 import 是声明语句，只能出现在顶层，不能放在 if 或 try 里

加载时机与执行逻辑不同

本质差异在于“动态”还是“静态”：

• CommonJS 是运行时同步加载：代码执行到 require 才去读文件、执行模块、返回结果；支持条件加载、循环 require
• ES6 Module 是编译时静态加载：所有 import 在代码解析阶段就被分析确定，依赖关系固定；不支持运行时条件导入（除非用 import() 动态导入函数）
• 这种静态性让打包工具（如 Webpack、Vite）能做 tree-shaking——自动剔除未使用的导出代码

值传递方式不同

影响变量更新是否同步：

• CommonJS 导出的是值的拷贝：比如导出一个数字或字符串，后续模块内修改它，不会反映到已导入的地方
• ES6 Module 导出的是值的动态只读引用：导出一个对象或函数，其内部属性变化会同步体现；但不能重新赋值整个导出绑定（如 export let a = 1; a = 2 允许，但 a = {} 不行）
• 典型例子：一个计数器模块，ES6 中多个地方 import 同一个 let count = 0，都能看到彼此的 count++ 变化；CommonJS 则各自拿到初始值的副本

环境与配置要求不同

实际使用需注意兼容性细节：

• Node.js 中，默认是 CommonJS；启用 ESM 需满足三者之一：.mjs 后缀、package.json 中设 "type": "module"、或命令行加 --experimental-modules（旧版）
• 浏览器原生支持