CommonJS模块化规范详解
大家好，今天本人给大家带来文章《什么是CommonJS？模块化的规范》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！
CommonJS在Node.js中扮演了基石角色，它通过require和module.exports实现了服务器端JavaScript的模块化，解决了命名空间污染和依赖管理问题，促进了npm生态的繁荣；其同步加载机制适合本地文件系统，使代码组织更清晰、可维护，而与ES Modules相比，CommonJS采用动态、同步加载，缺乏静态分析能力，不支持浏览器原生运行，导致在前端使用时需依赖打包工具，面临性能瓶颈和Tree-shaking效率低等挑战，且与ESM混用会增加开发复杂性，但正是CommonJS的出现为Node.js的结构化开发和庞大生态系统奠定了坚实基础。
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中用