什么是CommonJS？模块化的规范-js教程-PHP中文网

CommonJS在Node.js中扮演了基石角色，它通过require和module.exports实现了服务器端JavaScript的模块化，解决了命名空间污染和依赖管理问题，促进了npm生态的繁荣；其同步加载机制适合本地文件系统，使代码组织更清晰、可维护，而与ES Modules相比，CommonJS采用动态、同步加载，缺乏静态分析能力，不支持浏览器原生运行，导致在前端使用时需依赖打包工具，面临性能瓶颈和Tree-shaking效率低等挑战，且与ESM混用会增加开发复杂性，但正是CommonJS的出现为Node.js的结构化开发和庞大生态系统奠定了坚实基础。

什么是commonjs？模块化的规范

CommonJS是Node.js运行时环境早期采用的一种模块化规范，它定义了模块如何被创建、导出和导入。它本质上提供了一种在服务器端JavaScript中组织和重用代码的方式，解决了全局命名空间污染和文件依赖管理混乱的问题，为Node.js生态的蓬勃发展奠定了基石。

CommonJS的模块化方案，核心在于

require

登录后复制

函数和

module.exports

登录后复制

（或其简写

exports

登录后复制

）对象。当你需要在一个文件中使用另一个文件提供的功能时，就用

require

登录后复制

来引入它。而当你想让当前文件的一些内容能够被其他文件使用时，就通过

module.exports

登录后复制

把它们暴露出去。这种机制是同步的，也就是说，当

require

登录后复制

一个模块时，它会立即加载并执行该模块，然后返回其导出的内容。这在服务器端非常合适，因为文件通常都在本地磁盘上，I/O操作相对迅速，而且程序执行是线性的，同步加载不会造成太大的性能瓶颈，反而简化了依赖管理。

CommonJS在Node.js生态中扮演了怎样的角色？

CommonJS在Node.js中简直就是“基石”级别的存在。你想啊，Node.js的初心就是让JavaScript能在服务器端跑起来，但传统的浏览器JS哪有什么模块概念？大家都是全局变量一把梭，或者用IIFE（立即执行函数表达式）来模拟作用域。这在小项目里还行，但Node.js要处理的是复杂的后端逻辑，没有一套靠谱的模块管理机制，那简直是灾难。

CommonJS应运而生，它提供了一种简单、直观的方式来封装代码，让每个文件都可以是一个独立的模块。

require

登录后复制

和

module.exports

登录后复制

这对组合，让开发者能清晰地定义模块的边界和对外接口。这直接促成了npm（Node Package Manager）的繁荣，因为有了CommonJS，大家可以放心地把自己的代码打包成模块，上传到npm，然后其他人就能通过

npm install

登录后复制

轻松安装、

require

登录后复制

引入。这就像搭积木一样，每个人贡献一块，最终拼成一个庞大的生态系统。没有CommonJS，Node.js可能就没法像今天这样，拥有如此丰富的第三方库和工具链。它让Node.js的后端开发变得结构化、可维护，也更高效。

CommonJS与ES Modules（ESM）在设计理念上有何不同？

要说CommonJS和ES Modules（ESM）这哥俩最大的不同，那可就太多了，但核心的几个点，你得知道。

首先是加载机制：CommonJS是同步加载的。当你

require('some-module')

登录后复制

时，Node.js会停下来，把这个模块加载进来、执行完，然后才继续往下走。这在服务器端，文件都在本地，通常不是问题。但你想想，如果是在浏览器里，网络请求是异步的，你让浏览器停下来等一个模块下载完，那用户体验不就卡死了吗？

ESM则完全不同，它是异步加载的。

import

登录后复制

语句在解析阶段就会被处理，它不会阻塞主线程。这对于浏览器环境来说是天作之合，因为它可以并行加载多个模块，大大提升了页面加载速度。

其次是静态分析能力：CommonJS的

require

登录后复制

是动态的，你可以在代码的任何地方调用它，甚至可以根据条件判断是否加载某个模块。比如

if (DEBUG) { require('debug-tool'); }

登录后复制

。这种灵活性也带来一个问题：工具链（比如Webpack的tree-shaking）很难在编译时确定哪些代码是真正被用到的，哪些可以被优化掉。

ESM的

import

登录后复制

和

export

登录后复制

则是静态的。它们必须出现在文件的顶层，不能放在条件语句或函数内部。这种静态性让构建工具在编译时就能明确地知道模块之间的依赖关系，从而实现更高效的tree-shaking（摇树优化），只打包实际用到的代码，极大地减小了最终产物的体积。

再者是值拷贝与引用：CommonJS在

require

登录后复制

一个模块时，会得到这个模块

module.exports

登录后复制

对象的一个拷贝。这意味着如果你在引入模块后修改了它的导出对象，并不会影响到模块内部的原始值。而ESM的

import

登录后复制

则是引用。如果你导入了一个变量，并在其他地方修改了它，这个修改会反映到所有引用该变量的地方，因为它们都指向同一个内存地址。当然，这主要是指基本类型和对象引用的区别。

最后，浏览器支持：ESM是ECMAScript规范的一部分，现代浏览器都原生支持ESM，可以直接在HTML中用

<script type="module">

登录后复制

来加载。CommonJS则没有浏览器原生支持，如果你想在浏览器里用CommonJS模块，就必须借助Webpack、Rollup等打包工具将其转换成浏览器能理解的代码。

在前端项目中使用CommonJS会遇到哪些实际挑战？

虽然CommonJS在Node.js里是王者，但把它直接搬到前端项目，那可就有点“水土不服”了，会遇到一些挺实际的挑战。

最直接的挑战就是浏览器不认识它。浏览器压根就不懂

require

登录后复制

和

module.exports

登录后复制

是啥。你直接把一个CommonJS模块扔到浏览器里，它会报错，因为这些关键字不是JavaScript的内置语法。所以，如果你想在前端用CommonJS，就必须引入像Webpack、Rollup或者Parcel这样的模块打包器。这些工具会把你的CommonJS模块以及其他各种资源（CSS、图片等）“编译”成浏览器能理解的JavaScript文件。这个过程虽然解决了兼容性问题，但也引入了额外的构建步骤和复杂度。

其次，性能问题。CommonJS的同步加载机制，在前端环境里是个大忌。想象一下，如果你的页面需要加载几十个CommonJS模块，浏览器就得一个接一个地去加载和执行它们，这会阻塞页面的渲染，导致用户看到白屏时间变长，体验很差。虽然打包工具会把它们打包成一个或几个文件，但本质上还是把同步执行的逻辑“捆绑”在一起。

还有一个问题是Tree-shaking的效率。前面提到，CommonJS的动态

require

登录后复制

使得构建工具很难进行有效的Tree-shaking。这意味着即使你只用了某个库的一小部分功能，打包工具也可能把整个库都打包进去，导致最终的JavaScript文件体积过大。这对于追求极致性能的前端项目来说，是个不小的负担，因为文件越大，下载时间越长，用户等待时间也越长。

最后，与ESM的混用。随着ES Modules成为JavaScript的官方模块标准，越来越多的新库和框架开始采用ESM。在同一个项目中同时使用CommonJS和ESM，虽然打包工具通常能处理这种混搭，但有时候还是会遇到一些奇奇怪怪的问题，比如默认导出和命名导出的转换、循环依赖处理上的差异等，这会增加调试的复杂性。开发者需要对两种模块化规范都有深入的理解，才能更好地驾驭这种混合开发模式。

以上就是什么是CommonJS？模块化的规范的详细内容，更多请关注php中文网其它相关文章！