贝利信息

javascript的模块化是如何发展的_ES6模块与CommonJS有何不同

日期:2025-12-23 00:00 / 作者:狼影
JavaScript模块化演进为从无到有、手动管理到标准化的过程,ES6模块(ESM)与CommonJS是两大主流方案,核心差异在于加载时机(编译时静态 vs 运行时动态)、导出机制(活绑定 vs 值拷贝)、语法设计(default/named导出 vs 单一module.exports)及运行环境适配。

JavaScript模块化的发展,是从无到有、从手动管理到标准化的过程。早期脚本直接写在页面里,依赖全局变量和命名约定;后来为解决冲突和复用问题,出现了多种模块规范,最终ES6模块(ECMAScript Module, ESM)成为官方标准,而CommonJS则是Node.js长期使用的主流方案。两者核心差异不在“谁更好”,而在设计目标、执行时机和运行环境不同。

模块加载时机:编译时 vs 运行时

ES6模块是静态的,在代码解析阶段(编译时)就确定依赖关系。import必须写在顶层作用域,不能放在if或函数里,也不能动态拼接路径。这使得工具可以做静态分析、tree-shaking、循环依赖检测等优化。

CommonJS是动态的,在require()执行时才去查找、加载、执行模块。它支持条件引入、循环引用的延迟求值,也允许在任意位置调用require

导出与导入机制:绑定 vs 值拷贝

ES6模块导出的是**活的绑定(live binding)**:导出的变量与原始变量保持连接。如果模块内部修改了导出的值,其他导入该值的地方会同步看到更新。

CommonJS导出的是**值的浅拷贝(snapshot)**:module.exportsrequire返回时被冻结,后续对原变量的修改不影响已导入的对象。

例如:

默认导出与命名导出:语法与语义差异

ES6区分defaultnamed导出,语义清晰:

CommonJS只有单一导出对象module.exports,所有导出都通过这个对象挂载:

注意:CommonJS没有语法级的“默认导出”概念,export default在ES6中是语言特性,不是约定。

运行环境与互操作性:Node.js如何桥接两者

Node.js从v12起支持ESM,但默认仍用CommonJS(.js文件)。启用ESM需满足以下任一条件:

两种模块不能直接混用:import不能直接引入CommonJS模块(反之亦然),但Node.js提供了兼容层:

不过静态import语句无法导入CommonJS的具名导出(如import { x } from 'cjs'会报错),只能导入默认导出。