javascript的模块化是如何发展的_ES6模块与CommonJS有何不同-js教程-PHP中文网

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

狼影

发布： 2025-12-23 14:13:02

原创

856人浏览过

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

javascript的模块化是如何发展的_es6模块与commonjs有何不同

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

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

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

合法：import { foo } from './utils.js';
非法：if (condition) { import { bar } from './bar.js'; }（语法错误）

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

合法：if (env === 'dev') require('./debug.js');
合法：const mod = require('./' + name + '.js');（路径可计算）

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

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

立即学习“Java免费学习笔记（深入）”；

CommonJS导出的是**值的浅拷贝（snapshot）**：module.exports在require返回时被冻结，后续对原变量的修改不影响已导入的对象。

例如：

Modoer多功能点评系统2.5 精华版 Build 20110710 UTF8

Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步旗舰版系统框架2.增加限制图片

查看详情

ES6中：export let count = 0; → 其他模块import { count }后，原模块count++，导入处count也会变
CommonJS中：module.exports = { count: 0 }; → 导入后修改原模块的count，导入对象里的count不变（除非改的是对象属性，且导入的是同一引用）

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

ES6区分default和named导出，语义清晰：

export default function() {} → 导入时可自定义名称：import myFunc from './mod.js';
export const a = 1; export function b() {} → 必须按名导入：import { a, b } from './mod.js';

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

module.exports = function() {}; → 相当于ES6的export default
module.exports.a = 1; module.exports.b = () => {}; → 类似ES6的export { a, b }，但需import * as mod from或解构const { a } = require(...)

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