0

0

什么是CommonJS和ES模块?

月夜之吻

月夜之吻

发布时间:2025-08-31 13:41:01

|

421人浏览过

|

来源于php中文网

原创

CommonJS采用同步加载和值拷贝,模块导出的是静态值;ES模块支持异步加载和动态引用,导出绑定保持实时更新,两者在加载机制、缓存策略及变量绑定上存在本质差异。

什么是commonjs和es模块?

CommonJS和ES模块是JavaScript中两种主要的模块化规范,它们定义了代码如何被组织、导入和导出。CommonJS主要用于Node.js环境,采用同步加载;而ES模块是ECMAScript官方标准,支持异步加载,广泛应用于浏览器和现代Node.js。

讲到JavaScript的模块化,我总觉得这像是一场语言自身进化史上的重要篇章。一开始,我们的JS代码都是全局变量满天飞,命名冲突是家常便饭。后来,为了管理这种混乱,社区开始探索各种模式,比如IIFE(立即执行函数表达式),但这终究不是一个统一的解决方案。CommonJS和ES模块的出现,正是为了解决这个核心痛点:如何优雅、高效地组织和复用代码。

CommonJS,这个名字一听就知道它和“通用”计算有关。它诞生在服务器端,主要是Node.js的天下。它的核心思想是:每个文件都是一个独立的模块。你通过

require()
来导入模块,通过
module.exports
exports
来导出。这种模式是同步加载的,也就是说,当你
require
一个模块时,它会立即执行并返回结果。这在服务器端很合理,因为文件都在本地磁盘上,读取速度快,同步加载并不会造成太大的性能瓶颈。

举个例子:

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

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

这种模式简洁有效,让Node.js的生态系统迅速壮大。

然而,当JavaScript开始大规模进军浏览器端时,CommonJS的同步加载就显得力不从心了。浏览器需要从网络加载资源,同步加载会阻塞页面渲染,用户体验会非常糟糕。于是,ES模块(ECMAScript Modules),或者我们常说的ESM,应运而生,它被设计成JavaScript的官方模块标准,从一开始就考虑到了异步加载的需求。

ESM使用

import
export
关键字。它的加载是异步的,并且支持静态分析,这意味着工具可以在代码运行前就确定模块的依赖关系,这对于tree-shaking(摇树优化,移除未使用的代码)和更好的性能优化至关重要。

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

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

注意到文件扩展名了吗?

.mjs
是Node.js中用来明确标识ES模块的常见做法,尽管现在也可以通过
package.json
中的
"type": "module"
来统一处理。

所以,核心区别在于:CommonJS是Node.js的产物,同步加载,运行时确定依赖;ES模块是JS官方标准,异步加载,编译时确定依赖。它们各自有其历史背景和适用场景,但现在,整个生态都在朝着ES模块的方向靠拢。

DaGaoPeng(大高朋网团购程序)
DaGaoPeng(大高朋网团购程序)

大高朋团购系统是一套Groupon模式的开源团购程序,开发的一套网团购程序,系统采用ASP+ACCESS开发的团购程序,安装超简,功能超全面,在保留大高朋团购系统版权的前提下,允许所有用户免费使用。大高朋团购系统内置多种主流在线支付接口,所有网银用户均可无障碍支付;短信发送团购券和实物团购快递发货等。 二、为什么选择大高朋团购程序系统? 1.功能强大、细节完善 除了拥有主流团购网站功能,更特别支

下载

为什么Node.js同时支持CommonJS和ES模块,这带来了哪些挑战?

Node.js作为JavaScript的运行时环境,一开始就选择了CommonJS作为其模块系统。这在当时是完全合理的,也极大地推动了Node.js的普及。但随着ES模块成为ECMAScript的官方标准,Node.js也面临了一个不可避免的问题:如何拥抱这个新标准,同时又不破坏现有的CommonJS生态?这是一个巨大的挑战,因为这两种模块系统在设计理念、加载机制、作用域处理上都有本质的区别。

最直接的挑战是互操作性。你不可能一夜之间把所有CommonJS模块都转换成ES模块,反之亦然。这就需要一个机制,让这两种模块能够相互调用。Node.js采取了一些策略:

  • 默认 CommonJS: 除非你明确告诉Node.js一个文件是ES模块(比如使用
    .mjs
    扩展名,或者在
    package.json
    中设置
    "type": "module"
    ),否则它会默认将其视为CommonJS模块。
  • ESM 导入 CommonJS: 在ES模块中,你可以通过
    import CJSModule from 'cjs-module';
    这样的语法导入CommonJS模块。但要注意,CommonJS模块的
    module.exports
    会被视为ES模块的默认导出。具名导出则无法直接导入,需要一些变通方法。
  • CommonJS 导入 ESM: 这就有点棘手了。CommonJS是同步加载的,而ESM是异步的。直接
    require()
    一个ES模块是行不通的。Node.js提供了一个动态
    import()
    函数,它返回一个Promise,允许CommonJS模块以异步的方式加载ES模块。
    // cjs-app.js
    async function main() {
      const { add } = await import('./math.mjs'); // 动态导入
      console.log(add(5, 5));
    }
    main();

    这种方式虽然解决了问题,但引入了异步性,使得代码结构变得复杂。

另一个挑战是模块解析机制。CommonJS的

require
路径解析规则和ESM的
import
解析规则有所不同,尤其是对待文件扩展名和目录索引文件(如
index.js
)的方式。这导致在混合使用时,开发者需要特别注意路径的写法,避免出现“找不到模块”的错误。

再者,作用域和

this
行为也有差异。CommonJS模块内部的
this
指向
module.exports
,而ES模块顶层的
this
undefined
,更接近严格模式。这些细微的差别在迁移或混合开发时,如果不注意,很容易引入难以调试的bug。

这种双重支持虽然带来了灵活性,但也无疑增加了Node.js生态的复杂性,让初学者感到困惑,也让老开发者在项目迁移或新项目选型时需要深思熟虑。我们现在正处于一个过渡期,理解这些差异和挑战,对于编写健壮、可维护的Node.js应用至关重要。

CommonJS和ES模块在加载机制、缓存与绑定上的核心差异是什么?

深入理解CommonJS和ES模块,不能只停留在

require/exports
import/export
的语法层面,它们底层的加载机制、模块缓存以及变量绑定的方式,才是真正决定它们行为差异的关键。

加载机制: CommonJS采用的是同步加载。这意味着当Node.js遇到

require()
语句时,它会暂停当前模块的执行,去加载、编译并执行被请求的模块,然后返回其
module.exports
对象,之后当前模块才继续执行。这种方式简单直接,但在网络IO密集的场景下(比如浏览器),会导致严重的阻塞。

ES模块则采用异步加载。它的加载过程分为三个阶段:

  1. 构建(Construction): 查找、下载并解析模块,构建模块记录(Module Record)。
  2. 实例化(Instantiation): 将模块与内存中的实际值绑定,但不执行代码。
  3. 求值(Evaluation): 运行模块代码,填充导出值。 这个过程是异步的,并且可以并行进行。浏览器可以预先加载模块的依赖,提高效率。这种设计使得ES模块天生适合在浏览器环境中工作,也为Tree Shaking等优化提供了可能。

模块缓存: 两种模块系统都支持模块缓存,以避免重复加载和执行。

  • CommonJS: 当一个模块被
    require()
    加载后,它的
    module.exports
    对象会被缓存起来。后续再次
    require()
    同一个模块时,会直接返回缓存中的对象,而不会重新执行模块代码。这个缓存是基于文件路径的。
  • ES模块: ES模块的缓存机制更为精细。一旦模块被加载并实例化,它的模块记录就会被缓存。这包括模块的导出绑定。即使模块代码再次被请求,也只会返回已缓存的绑定。

变量绑定(值拷贝 vs 引用): 这是两者之间一个非常重要的,也常常让人混淆的差异点。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

552

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

731

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

475

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

394

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

656

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

551

2023.09.20

Java 项目构建与依赖管理(Maven / Gradle)
Java 项目构建与依赖管理(Maven / Gradle)

本专题系统讲解 Java 项目构建与依赖管理的完整体系,重点覆盖 Maven 与 Gradle 的核心概念、项目生命周期、依赖冲突解决、多模块项目管理、构建加速与版本发布规范。通过真实项目结构示例,帮助学习者掌握 从零搭建、维护到发布 Java 工程的标准化流程,提升在实际团队开发中的工程能力与协作效率。

10

2026.01.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
最经典的Node.JS全套视频教程
最经典的Node.JS全套视频教程

共20课时 | 2.6万人学习

JavaScript模块化教程
JavaScript模块化教程

共10课时 | 1.1万人学习

【web前端】Node.js快速入门
【web前端】Node.js快速入门

共16课时 | 2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号