JavaScript模块化演进_CommonJS到ES Modules-js教程-PHP中文网

JavaScript模块化演进_CommonJS到ES Modules

夢幻星辰

发布： 2025-11-14 22:35:02

原创

961人浏览过

JavaScript模块化从CommonJS服务端奠基到ES Modules成为跨平台官方标准，历经语法与生态演进。CommonJS通过require和module.exports实现同步加载，适用于Node.js；而ESM采用import/export支持静态分析、tree-shaking及浏览器原生异步加载，推动前端工程化进步。尽管两者因文件扩展名、API和运行时差异共存并带来迁移挑战，但现代项目已转向ESM为主流，Node.js与浏览器均良好支持，标志着模块化统一时代的到来。

javascript模块化演进_commonjs到es modules

JavaScript 的模块化发展经历了从无到有、从服务端主导到浏览器原生支持的完整过程。早期的 JavaScript 缺乏模块机制，开发者通过全局变量和立即执行函数来组织代码，导致命名冲突和依赖混乱。随着项目复杂度提升，模块化成为刚需。CommonJS 在 Node.js 环境中率先解决了这个问题，随后 AMD、UMD 等方案尝试在浏览器中实现异步加载。最终，ES Modules（ESM）作为官方标准被纳入语言规范，实现了跨平台统一。

CommonJS：服务端模块化的奠基者

CommonJS 是为了解决服务器端 JavaScript 模块化问题而提出的规范，Node.js 采用了这一标准并广泛推广。它使用 require() 加载模块，module.exports 或 exports 导出内容。

特点包括：

同步加载，适合服务端文件读取场景
每个模块有独立作用域，避免全局污染
支持动态路径和条件引入
不适用于浏览器环境，因同步加载会阻塞页面

示例代码：

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

// math.js
module.exports = {
  add: (a, b) => a + b
};
<p>// app.js
const { add } = require('./math');
console.log(add(2, 3));

登录后复制

ES Modules：现代 JavaScript 的官方标准

ES6（ECMAScript 2015）正式引入了 ES Modules（ESM），成为语言层面的模块系统。它设计之初就考虑了静态分析、性能优化和跨平台兼容性。

核心语法使用 import 和 export，支持命名导出和默认导出。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

主要优势：

静态结构便于编译时优化和 tree-shaking
支持浏览器原生加载（通过 type="module"）
异步加载机制更适合前端资源管理
与工具链（如 Webpack、Vite）深度集成

示例代码：

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

// math.mjs
export const add = (a, b) => a + b;
export default function multiply(a, b) {
  return a * b;
}
<p>// app.mjs
import multiply, { add } from './math.mjs';
console.log(add(2, 3));
console.log(multiply(2, 3));

登录后复制