CommonJS和ES模块是JavaScript生态中两种核心的模块化规范，分别适配不同的运行环境和开发需求，理解两者的差异是前端和Node.js开发的基础能力。
CommonJS规范介绍
CommonJS是Node.js早期采用的模块化规范，设计目标是服务于服务器端JavaScript的运行场景，核心特点是同步加载模块，适合本地文件系统的模块读取。
CommonJS核心语法
CommonJS通过require函数导入模块，通过module.exports或者exports导出模块内容，下面是基础的使用示例：
// math.js 导出模块
// 定义一个加法函数
function add(a, b) {
return a + b;
}
// 通过module.exports导出函数
module.exports = {
add
};
// main.js 导入模块
// 导入math模块，路径为相对路径
const math = require('./math.js');
// 调用导入的add函数
console.log(math.add(1, 2)); // 输出3
CommonJS的特性
- 模块加载是同步的，导入时会阻塞后续代码执行，直到模块加载完成
- 模块输出的是值的拷贝，一旦导出后，模块内部的值变化不会影响已经导出的结果
- 模块作用域是独立的，每个模块内部的变量不会污染全局作用域
- 主要在Node.js环境中原生支持，浏览器环境需要借助工具转换才能运行
ES模块规范介绍
ES模块是ECMAScript官方在ES6中推出的标准化模块化规范，设计目标是同时适配浏览器和服务器端场景，支持静态分析，是未来JavaScript模块化的主流方向。
ES模块核心语法
ES模块通过import关键字导入模块，通过export关键字导出模块内容，支持命名导出和默认导出两种形式，示例如下：
// utils.js 导出模块
// 命名导出：导出两个工具函数
export function formatDate(date) {
return date.toLocaleDateString();
}
export function generateId() {
return Math.random().toString(36).slice(2);
}
// 默认导出：导出一个配置对象
export default {
timeout: 3000,
baseUrl: 'https://ipipp.com/api'
};
// app.js 导入模块
// 导入默认导出内容，自定义名称为config
import config from './utils.js';
// 导入命名导出的函数，使用大括号包裹
import { formatDate, generateId } from './utils.js';
console.log(config.timeout); // 输出3000
console.log(formatDate(new Date())); // 输出当前日期字符串
ES模块的特性
- 模块加载是异步的，不会阻塞主线程，适合浏览器端的网络加载场景
- 模块输出的是值的引用，导入方获取的是模块内部值的实时引用，模块内部值变化会同步反映到导入方
- 支持静态分析，编译阶段就能确定模块的依赖关系，有利于 tree shaking 等优化操作
- 浏览器和现代Node.js都原生支持，不需要额外转换即可运行
两者的核心差异对比
为了更清晰地区分CommonJS和ES模块，我们可以从多个维度进行对比：
| 对比维度 | CommonJS | ES模块 |
|---|---|---|
| 加载方式 | 同步加载 | 异步加载 |
| 导出本质 | 值的拷贝 | 值的引用 |
| 静态分析 | 不支持，依赖在运行时确定 | 支持，依赖在编译时确定 |
| 适用环境 | Node.js为主 | 浏览器、Node.js均支持 |
| 循环依赖处理 | 加载时只执行已加载的部分，后续部分不会执行 | 支持循环依赖，导入的是实时引用 |
使用场景建议
在实际项目中选择模块化规范时，可以参考以下建议：
- 如果是纯Node.js后端项目，且不需要考虑浏览器兼容性，可以继续使用CommonJS，生态兼容性更好
- 如果是前端项目或者全栈项目，优先使用ES模块，能够享受静态分析、tree shaking等优化能力，也符合未来标准
- 如果项目需要同时兼容两种规范，可以通过配置打包工具如Webpack、Rollup进行转换，避免直接混用导致报错
注意：Node.js中默认情况下.js文件会被识别为CommonJS模块，如果需要使用ES模块，需要将文件后缀改为.mjs，或者在package.json中设置"type": "module"。
CommonJSES_moduleJavaScript模块化修改时间：2026-07-19 22:09:26