JavaScript如何实现模块化_ES6模块和CommonJS有何不同

JavaScript模块化分ES6（静态编译时解析、实时绑定）和CommonJS（动态运行时加载、值拷贝），二者不原生兼容，需工具桥接；现代前端优先ES6，Node新项目可启用ESM，npm包建议双格式发布。

JavaScript模块化是把代码拆分成独立、可复用的单元，ES6模块（import/export）和CommonJS（require/module.exports）是两种主流方案，核心区别在于设计目标、加载时机和运行环境。

ES6模块是编译时静态解析

ES6模块在代码解析阶段就确定依赖关系，不执行代码也能知道导入了什么。这意味着：

• 不能动态导入路径：比如 import './' + name + '.js' 会报语法错误；需用 import() 动态函数替代
• 顶层 this 是 undefined，不是模块对象
• 绑定是实时的、只读的：导出变量被修改后，所有导入处能立即看到变化（如 export let count = 0，另一模块改它，导入方也同步更新）
• 支持 export default 和具名导出混用，但 import 语法必须匹配导出形式

CommonJS是运行时动态加载

Node.js早期采用的模块系统，依赖在代码执行到 require() 时才真正加载：

• 可以条件引入：比如 if (env === 'dev') require('./mock') 合法
• 每次 require 返回的是模块导出对象的拷贝（浅拷贝），后续修改不影响已导入值
• 模块缓存基于文件路径：相同路径的 require 总是返回同一缓存对象，避免重复执行
• module.exports 和 exports 都可导出，但直接赋值 exports = {...} 会断开与 module.exports 的引用，应避免

二者不能直接互调，需工具桥接

ES6模块默认不兼容CommonJS，反之亦然。实际项目中常需转换：

• Node.js 14+ 支持 .mjs 或 "type": "module" 启用ES6模块，此时 require() 不能直接用，需用 import() 或 createRequire 兼容旧模块
• 打包工具（如Webpack、Vite）自动处理混合模块：把CommonJS转成ES6风格，或为ES6模块生成兼容的UMD/AMD包装
• 使用 export default require('xxx') 可在ES6模块中导入CommonJS包（Webpack等支持），但属于工具层面的“糖”，非语言原生能力

选择建议：看环境和团队规范

现代前端开发优先用ES6模块，Node.js新项目也可启用原生ESM；CommonJS仍在大量Node库和老项目中广泛存在：

• 写浏览器端代码或使用Vite、Webpack等工具链 → 用 import/export
• 写纯Node.js脚本且需兼容老版本（如Node 12以下）→ 用 require/module.exports
• 发布npm包时，可同时提供 main（CommonJS）和 exports（ESM）字段，兼顾不同消费者
• 避免在同一个文件里混用两种语法（如 import 和 require 并存），易引发解析错误或行为不一致

不复杂但容易忽略：模块化不只是语法差异，更是加载机制、作用域模型和工具链协同的结果。理解本质比记住写法更重要。