JS模块化：从CommonJS到ES Modules演进-js教程-PHP中文网

JS模块化：从CommonJS到ES Modules演进

狼影

发布： 2025-11-19 21:32:02

原创

264人浏览过

JavaScript模块化从CommonJS到ES Modules的演进解决了代码组织与加载效率问题。CommonJS通过require和module.exports实现服务端同步加载，适合Node.js环境；而ES Modules作为ES6标准，采用import/export支持浏览器异步静态加载，具备静态分析与Tree Shaking优势。两者在加载机制、语法和导出本质上存在差异，但Node.js通过.mjs扩展名或"type": "module"支持共存。现代前端工具普遍以ESM为默认，标志着JS向工程化语言的成熟发展。

js模块化：从commonjs到es modules演进

JavaScript 模块化是现代前端开发的核心基础之一。随着项目规模扩大，代码组织变得愈发重要。从早期的全局变量冲突，到如今清晰的模块系统，JS 模块化经历了一段重要的演进过程。其中，CommonJS 和 ES Modules 是两个关键阶段。

CommonJS：服务端模块化的先行者

CommonJS 是为了解决 JavaScript 在服务端（如 Node.js）缺乏标准模块系统的问题而提出的规范。它采用同步加载模块的方式，适合服务器环境，因为文件都存在本地磁盘上，读取速度快。

其核心特点包括：

通过 require 导入模块
通过 module.exports 或 exports 导出内容
模块是运行时动态加载，支持条件导入

// math.js
function add(a, b) {
  return a + b;
}
module.exports = { add };

// app.js
const { add } = require('./math');
console.log(add(2, 3)); // 5

登录后复制

由于依赖同步加载，CommonJS 不适合浏览器环境——会阻塞页面渲染。因此，尽管在 Node.js 中仍广泛使用，但浏览器中逐渐被更现代化的方案替代。

ES Modules：语言层面的官方标准

ES Modules（简称 ESM）是 ECMAScript 2015（ES6）引入的官方模块系统，旨在统一 JavaScript 的模块规范。它设计之初就考虑了浏览器和服务器的通用性，并支持静态分析、Tree Shaking 等优化手段。

主要特性有：

使用 import 声明导入模块
使用 export 声明导出内容
模块是静态的，编译时确定依赖关系
支持动态导入 import() 实现按需加载

// math.mjs
export function add(a, b) {
  return a + b;
}

// app.mjs
import { add } from './math.mjs';
console.log(add(2, 3)); // 5

登录后复制

在浏览器中，ESM 需要通过 <script type="module"> 来启用。模块默认处于严格模式，且跨域加载受 CORS 限制。

Vinteo AI

利用人工智能在逼真的室内环境中创建产品可视化。无需设计师和产品照片拍摄

查看详情

CommonJS 与 ES Modules 的差异与共存

两者在语法、加载机制和执行时机上有明显不同：

加载方式：CommonJS 同步，ESM 默认异步静态加载
动态性：CommonJS 支持动态路径和条件加载；ESM 的 import 必须在顶层且静态声明（动态 import() 除外）
导出本质：CommonJS 导出的是值的拷贝；ESM 导出的是绑定，可实时反映更新

Node.js 自 v12 起支持 ESM，但需注意文件扩展名为 .mjs，或在 package.json 中设置 "type": "module"。同时，Node.js 提供了互操作能力，例如用 import() 加载 CommonJS 模块，或通过 createRequire 在 ESM 中使用 require。

总结：演进背后的逻辑

从 CommonJS 到 ES Modules，反映的是 JavaScript 从脚本语言向工程化语言的转变。CommonJS 解决了模块化从无到有的问题，而 ESM 提供了标准化、高性能和工具友好的解决方案。如今大多数前端构建工具（如 Webpack、Vite）都以 ESM 为默认处理方式，Node.js 也在逐步推进对 ESM 的全面支持。

理解这段演进过程，有助于写出更符合现代规范的代码，也能更好应对混合模块环境中的兼容问题。

基本上就这些。

以上就是JS模块化：从CommonJS到ES Modules演进的详细内容，更多请关注php中文网其它相关文章！