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,反之亦然。实际项目中常需转换:
Modoer 是一款以本地分享,多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计,开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱,不局限于商铺类点评,真正实现了多类型的点评,可以让您的网站点评任何事与物,同时增加产品模块,也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步 旗舰版系统框架2.增加 限制图片
立即学习“Java免费学习笔记(深入)”;
- 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并存),易引发解析错误或行为不一致
不复杂但容易忽略:模块化不只是语法差异,更是加载机制、作用域模型和工具链协同的结果。理解本质比记住写法更重要。









