梳理一下前端模块化规范：CommonJS ESM AMD CMD UMD
前端模块化规范在发展过程中出现过多种规范，大多开发者都对这些名词有个印象，但问起来又有些模糊。本文的目的是做一个梳理，帮助记忆。
先上一张对比表：
| 类型 | 核心定位 | 语法关键词 | 适用环境 | 特点 |
|---|---|---|---|---|
| CommonJS（CJS） | Node.js 默认模块规范 | require、module.exports、exports | Node.js 服务端、Webpack 打包 | 同步加载、运行时加载、浅拷贝 |
| ESM | 官方标准模块规范 | import、export、export default | 现代浏览器、Node.js v14+ | 异步 / 静态加载、编译时确定依赖、绑定引用 |
| AMD | 异步模块规范 | define、require | 旧版前端项目（RequireJS） | 依赖前置、异步加载、不阻塞页面 |
| CMD | 异步模块规范 | define、require | 旧版前端项目（SeaJS） | 依赖就近、按需加载、风格接近 Node |
| UMD | 兼容模块格式 | 自执行函数包裹 | 浏览器全局、AMD、CommonJS | 自动判断环境、一套代码多环境可用 |
| Dual Package | 双产物发包策略 | 打出 2 个包 | npm 库、多环境兼容项目 | 同时输出 CJS 和 ESM 产物，工具自动识别 |
一、CommonJS（CJS）
CommonJS 是 Node.js 的默认模块化规范，也是早期前端打包支持的规范，很多老 Node 项目至今还在使用。
// 导出模块（a.js） // 方式1：整体导出 module.exports = { add: (a, b) => a + b, name: "CommonJS模块" }; // 方式2：单个导出 exports.sub = (a, b) => a - b; // 导入模块（b.js） const mod = require('./a.js'); console.log(mod.add(1, 2)); // 3 console.log(mod.sub(3, 1)); // 2特点：
同步加载：在 Node.js 服务端，文件都在本地，同步加载不会有问题。
浅拷贝：导出的是对象浅拷贝，后续原模块修改该值，导入方拿到的副本不会变。
补充：CommonJS 没有官方缩写，但行业内普遍简称 CJS。
二、ESM —— 官方标准
ESM（ES Modules）是 ECMAScript 官方推出的模块化规范，也是目前前端开发的主流 —— 现代浏览器、Node.js（v14+）、Vue/React 等框架，全部默认支持 ESM。
它解决了 CommonJS 的诸多痛点，比如同步加载、不支持 Tree-Shaking 等，语法也更简洁。
// 导出模块（a.js） // 方式1：命名导出（可多个） export const add = (a, b) => a + b; export const name = "ESM模块"; // 方式2：默认导出（仅1个） export default function sub(a, b) { return a - b; } // 导入模块（b.js） import { add, name } from './a.js'; import sub from './a.js'; console.log(add(1, 2)); // 3 console.log(sub(3, 1)); // 2特点：
静态编译：编译时就确定依赖关系，支持 Tree-Shaking（删除无用代码），打包体积更小；浏览器中是异步加载，不阻塞页面。
绑定引用：导出的是值的引用，原模块修改该值，导入方也会同步变化（和 CommonJS 的 “浅拷贝” 区分）。
三、AMD + CMD
- AMD（Asynchronous Module Definition），代表工具是 RequireJS，核心是依赖前置—— 一开始就声明所有依赖，异步加载完成后执行回调。
- CMD（Common Module Definition），代表工具是 SeaJS，核心是依赖就近—— 用到某个模块时，再去 require，写法风格接近 Node 的 CommonJS。
- AMD 是依赖前置、提前加载；CMD 是依赖就近、懒执行，两者现在都已淘汰，不必深入学习。
四、UMD
UMD（Universal Module Definition），直译是 “通用模块定义”，它不是一种新的规范，而是一种兼容方案—— 一套代码，能同时适配 CommonJS、AMD、浏览器全局变量。自动判断当前运行环境，选择对应的模块化方式。
标准无依赖 UMD 写法：
(function (root, factory) { // AMD if (typeof define === 'function' && define.amd) { define(factory); } // CommonJS else if (typeof module === 'object' && module.exports) { module.exports = factory(); } // 浏览器全局 else { root.MyModule = factory(); } })(this, function () { // 模块逻辑 return { add: (a, b) => a + b }; });特点：万能兼容，一套打包产物能在任何环境运行；但缺点是代码冗余，现在的开源库已经很少用 UMD，转而用更简洁的 Dual Package。
五、Dual Package —— 双产物包
它是一种发包策略，同时打包输出 CJS 和 ESM 两种产物，让项目既能支持 CommonJS，也能支持 ESM。
现代 npm 库的标准配置：
{ "name": "my-utils", "main": "dist/index.cjs", "module": "dist/index.mjs", "exports": { ".": { "import": "./dist/index.mjs", "require": "./dist/index.cjs" } } }优势：不用写环境判断代码，比 UMD 更简洁；适配所有现代项目和老 Node 项目，是目前开源库的主流发包方式。
六、package.json 的 type 字段
type是 Node.js 官方字段，用于声明模块化格式，影响.js文件的解析方式。
"type": "module"：按 ESM 解析不配置：默认按 CommonJS 解析
七、Webpack 打包指定输出规范
Webpack 5 推荐使用output.library.type：
输出 CommonJS：
module.exports = { output: { filename: 'bundle.js', library: { type: 'commonjs2' } } };输出 ESM：
module.exports = { output: { filename: 'bundle.mjs', library: { type: 'module' } }, experiments: { outputModule: true } };输出 UMD：
module.exports = { output: { library: { type: 'umd' } } };输出双产物：分别用两份配置打包两次即可。
总结
前端项目（Vue/React/Vite/Webpack）：一律用 ESM。
Node.js 项目：老项目用 CommonJS，新项目推荐 ESM。
开发 npm 库：使用 Dual Package 双产物；极老环境可额外打包 UMD。