JavaScript模块化历经CommonJS、AMD、CMD到ES Module的演进，解决代码组织与依赖管理问题；2. CommonJS为Node.js服务端设计，采用同步加载和值拷贝，适合服务器环境；3. AMD由RequireJS提出，支持异步加载与预定义依赖，适用于浏览器中并行加载模块；4. CMD由SeaJS倡导，强调依赖就近与懒执行，语法贴近CommonJS但运行于浏览器；5. ES Module为ES6标准，支持静态分析与动态绑定，具备编译时优化和跨平台能力，现已成为主流规范。整体发展体现从运行时到编译时、从服务端向全场景统一的进程，当前以ESM为主，理解各阶段差异有助于维护旧项目及掌握构建工具原理。

JavaScript 模块化的发展是为了应对代码组织混乱、依赖管理困难的问题。随着前端工程化演进，不同规范在不同时期解决了特定场景下的需求。

CommonJS：服务端模块的奠基者

CommonJS 是早期为 Node.js 设计的模块规范，采用同步加载方式，适合服务器环境。

• 运行时加载：模块在执行时才被引入，require 可出现在代码任意位置
• 值拷贝导出：module.exports 输出的是值的拷贝，后续修改不影响已导出内容
• 同步加载：依赖本地文件系统，通过 require 同步读取模块，不适合浏览器

典型写法：const fs = require('fs'); module.exports = {};

AMD：浏览器异步加载的先行者

为解决浏览器中模块异步加载问题，RequireJS 提出了 AMD 规范。

• 预定义依赖：define 函数第一个参数明确列出所有依赖项
• 异步加载：依赖按需并行加载，不阻塞 UI 渲染
• 浏览器友好：无需编译即可在浏览器运行，支持动态加载

典型写法：define(['jquery'], function($) { return {}; });

CMD：推崇就近依赖的轻量方案

SeaJS 提出的 CMD 规范更强调“按需加载、延迟执行”。

根据ui图生成前端页面

将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。

下载

• 依赖就近：require 写在逻辑内部，只有执行到才加载模块
• 懒执行：模块定义时不立即执行，等到真正 require 才运行
• 与 CommonJS 更接近：语法风格类似，但运行在浏览器中

典型写法：define(function(require, exports, module) { const $ = require('./jquery'); });

ES Module：语言原生的标准统一者

ES6 引入的 ESM 是官方标准，现已成为现代 JS 的主流模块系统。

• 静态分析：import 必须在顶层且不能动态使用，便于编译优化
• 动态绑定：导入的是对原始值的只读引用，源模块更新会反映到导入方
• 跨平台支持：Node.js 和浏览器都原生支持，逐步取代其他规范

典型写法：import React from 'react'; export default App;

基本上就这些。从 CommonJS 到 ESM，本质是从运行时到编译时、从服务端到全场景的演进。现在开发基本都用 ESM，但理解历史差异有助于维护老项目和构建工具原理。不复杂但容易忽略细节。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南