JavaScript模块化是将代码拆分为独立可复用单元,CommonJS为运行时动态模块系统,ES6 Module为编译时静态模块系统,二者在语法、加载时机、值绑定及环境支持上存在根本差异。

JavaScript模块化是指把代码按功能拆分成独立、可复用的单元(即“模块”),每个模块拥有自己的作用域,不污染全局环境,还能明确声明依赖关系和对外暴露的接口。
CommonJS 和 ES6 模块的核心区别
两者本质差异在于模块系统的构建时机与行为机制:CommonJS 是动态、运行时的模块系统;ES6 Module(ESM)是静态、编译时的模块系统。这个根本差异导致了语法、加载方式、值绑定、工具链支持等多方面不同。
语法写法完全不同
CommonJS 使用函数式 API:
- 导出用 module.exports 或 exports.xxx(注意不能直接赋值给 exports)
- 导入用 require('path'),返回一个对象
ES6 Module 使用声明式关键字:
立即学习“Java免费学习笔记(深入)”;
由于精力有限,程序更新比较慢,请大家谅解,再次感谢支持taycms的朋友们,虽然比较慢,我们还是会一直更新下去的。谢谢您的关注。有什么建议可以到论坛提出,或者直接给我QQ留言。 2.0会有很多新功能,请关注官方论坛TayCMS 1.8 升级日志此版本修复了不少BUG1.更换图片切换JS , 不会再有错误提示2.增加资料下载模块3.更换默认模版,使程序功能和页面结构更清晰,方便参考制作模版4.修复留
- 导出用 export(命名导出)或 export default(默认导出)
- 导入用 import,支持解构、重命名、动态 import(),且必须在顶层
加载时机与依赖解析方式不同
CommonJS 是运行时加载:
- require 可以写在 if、for、函数内部,路径可以是变量或表达式,支持动态加载
- 模块代码在 require 执行时才运行,导出内容是当时计算出的值的拷贝
ES6 Module 是编译时静态分析:
- import 必须在文件最外层,不能出现在条件或循环中(除非用 import() 动态导入)
- 依赖关系在代码执行前就确定,支持 Tree Shaking、循环依赖更健壮、利于构建工具优化
- export 绑定的是变量的引用,模块内值变化后,import 处能实时读到新值
运行环境与默认行为差异
CommonJS:
- 原生支持 Node.js(v12+ 默认仍为 CommonJS,可通过 .mjs 或 type="module" 切换)
- 不自动启用严格模式(需手动加 "use strict")
- 模块缓存基于文件路径,多次 require 同一模块返回同一份 module.exports 对象
ES6 Module:
-
浏览器原生支持(
),Node.js 从 v12 起稳定支持 - 自动启用严格模式,无需额外声明
- 模块标识由 URL(含查询参数)决定,相同路径不同参数视为不同模块









