17370845950

JavaScript模块化分CommonJS和ES6两种：前者用require/module.exports，同步动态加载，Node原生支持；后者用import/export，静态编译解析，浏览器原生支持，具实时绑定与循环引用优化。

JavaScript模块化是把代码拆分成独立、可复用的单元，避免全局污染和依赖混乱。CommonJS 和 ES6 模块（即 import/export）是两种主流方案，它们在语法、加载时机、运行环境和行为逻辑上都有本质区别。

语法写法和导出导入方式不同

CommonJS 使用 module.exports 和 require()，是同步、动态的函数调用：

• 导出：可以赋值给 module.exports（整个对象替换），或用 exports.xxx = ...（仅限添加属性）
• 导入：const utils = require('./utils')，返回的是模块导出值的浅拷贝（实际是引用，但 CommonJS 缓存的是 module.exports 对象本身）

ES6 模块使用 export 和 import，是静态声明、编译时确定的：

• 导出：支持 export default（一个默认导出）、export const x = 1（具名导出）、export { a, b } 等多种形式
• 导入：必须在顶层作用域，不能在条件语句或函数内；导入的是对原始绑定的实时只读引用（修改导出变量会影响其他模块）

加载机制和执行时机不同

CommonJS 是运行时同步加载，require() 执行时才去读文件、执行模块代码、返回结果。这意味着你可以把 require 写在 if 里，或者拼接路径动态引入（虽然不推荐）。

ES6 模块是编译时静态分析，JavaScript 引擎在代码执行前就解析所有 import，构建依赖图。因此无法真正“条件导入”，import() 动态导入函数是特例，返回 Promise，属于按需异步加载。

运行环境和兼容性差异明显

• CommonJS 原生支持 Node.js（v14+ 默认仍支持，v12 起也支持 ES 模块但需加 .mjs 或 "type": "module"）
• ES6 模块 是浏览器原生支持的标准（），Node.js 从 v12 开始实验性支持，现在已稳定，但需注意文件后缀或 package.json 配置
• 前端打包工具（如 Webpack、Vite）会把两种模块统一处理，但底层语义不会改变

循环引用的表现不一样

CommonJS 在遇到循环 require 时，返回的是当前已执行部分的 module.exports 对象（可能不完整）。例如 A require B，B 又 require A，A 中还没执行完的代码在 B 里拿不到。

ES6 模块则基于“实时绑定”，即使循环引用，也能访问到已初始化的导出绑定。只要变量已声明（哪怕未赋值），其他模块就能通过 import 获取其引用——但要注意 let/const 存在暂时性死区，未初始化前访问会报错。