CommonJS和ES Module有什么区别？

CommonJS与ES Module：核心差异解析**

在JavaScript的模块化开发领域，CommonJS（CJS）与ES Module（ESM）是两大主流规范，它们分别服务于不同的运行环境并具备显著差异，对于开发者而言，理解二者的区别是优化代码组织、提升项目性能的关键，本文将从设计背景、语法规则、加载机制及适用场景等维度展开对比，助你清晰掌握两者的核心差异。

设计背景与标准化进程

• CommonJS：起源于Node.js社区，旨在解决服务器端JavaScript的模块化问题，其设计初衷是支持同步加载模块，适用于本地文件系统环境。
• ES Module：由ECMAScript官方标准化（ES6引入），是JavaScript语言原生支持的模块系统，专为浏览器与现代化运行时设计，支持异步加载与静态分析。

核心差异：CJS是社区驱动的解决方案，而ESM是语言层面的官方标准，二者在生态兼容性与未来演进方向上存在本质区别。

语法规则对比

• 模块导出

  • CJS：使用module.exports或exports对象导出内容。

    // example.js  
    const api = "API Value";  
    module.exports = { api }; // 或 exports.api = api;  

  • ESM：通过export关键字直接导出变量、函数或类。

    // example.mjs  
    export const api = "API Value";  
    export function foo() {}  

• 模块导入

  • CJS：使用require()函数动态加载模块，返回导出的对象。

    const { api } = require('./example.js');  

  • ESM：通过import语句静态引入模块，导入内容为“只读引用”。

    import { api } from './example.mjs';  

关键区别：ESM的导入导出语法是静态的（编译时确定），而CJS支持动态路径（如require(variablePath)），后者在灵活性上更胜一筹，但前者更利于工具优化（如Tree Shaking）。

加载机制与执行时机

• CommonJS：

  • 同步加载：模块在代码执行到require()时立即加载，适合服务器端快速读取本地文件。
  • 运行时执行：模块代码在加载后逐行执行，导出值可动态修改（如根据条件导出不同内容）。

• ES Module：

  • 异步加载（浏览器环境）：模块在网络请求完成后解析，支持type="module"的脚本延迟加载。
  • 静态解析：模块依赖关系在解析阶段确定，代码执行前已构建完整的模块图，提升加载效率。
  • 值引用特性：导入的变量是原始值的拷贝或对象的引用（不可直接修改导入的绑定）。

性能影响：ESM的静态特性允许编译器进行优化（如移除未使用代码），而CJS的动态加载可能导致运行时开销增加。

适用场景与兼容性

• CommonJS：

  • 仍广泛用于Node.js旧版本（如v12以下）或需要动态加载模块的场景（如插件系统）。
  • 工具链支持：通过Babel或Webpack可将ESM转译为CJS以兼容旧环境。

• ES Module：

  • 现代浏览器与Node.js（v12+）原生支持，是前端工程化（如Vue/React组件库）的首选。
  • 优势：支持顶层await、模块联邦（Module Federation）等高级特性，契合微前端架构需求。

兼容性建议：新项目优先采用ESM，旧系统迁移时可借助构建工具逐步过渡。

选择依据与未来趋势

特性	CommonJS	ES Module
语法	动态导出，运行时确定	静态导出，编译时确定
加载方式	同步（Node.js）	异步（浏览器）/可同步（Node.js实验性）
适用环境	旧版Node.js、动态模块需求	浏览器、现代Node.js、前端工程化
优化潜力	较低	高（Tree Shaking、预加载）

随着Node.js对ESM的支持日益完善（如稳定版v18+），以及浏览器模块化需求的增长，ES Module正逐步成为跨端开发的标准，CommonJS在特定场景下的动态能力仍不可替代，开发者需根据项目需求、运行环境及团队技术栈综合选择，同时关注工具链的兼容性支持，以实现高效、可维护的模块化开发。