commonjs 和 ES Module

1. CommonJS (CJS)

是什么?

CommonJS 是为 服务器端 设计的模块化规范,最著名的实现就是 Node.js。它的诞生远早于浏览器原生支持模块化。

核心思想:

通过 require 来同步加载模块,通过 module.exports 或 exports 来导出模块。

工作原理与特性:

  1. 同步加载 (Synchronous): 当你执行 const fs = require('fs'); 时,Node.js 会暂停后续代码的执行,去磁盘上找到 fs 模块,执行它,然后返回 module.exports 的值。这个过程是阻塞的。

    • 为什么是同步? 因为在服务器上,所有模块文件都在本地硬盘,读取速度非常快,同步加载的开销很小,且实现简单。
  2. 模块输出的是值的拷贝: 当一个模块被 require 时,它会执行一次,然后将其 module.exports 的结果缓存起来。之后再次 require 同一个模块,会直接从缓存中读取。导出的如果是原始类型(如 string, number),那么导入的是这个值的拷贝。如果是对象,则是对象引用的拷贝。

    • 关键点: 一旦导出,模块内部的变化不会影响到已经导入的值(除非导出的是对象,然后修改对象的属性)。
  3. 运行时加载 (Runtime Loading): require 是一个函数,你可以在代码的任何地方调用它,甚至可以动态拼接路径(虽然不推荐)。模块的依赖关系在代码执行时才确定。

模块导出的是对象的引用 ,所以修改对象属性时会影响到其他 require 该模块的地方。而原始值则是拷贝传递的,不会受到影响。

如果模块导出的是对象或数组(即引用类型),那么修改导入模块中的内容会影响原模块中导出的内容,因为导入的模块是原对象或数组的引用。

如果模块导出的是原始数据类型(如 number, string, boolean 等),修改导入模块的内容不会影响原模块中的值。因为在 require 时,Node.js 会把这些值拷贝给导入模块,而不是引用它们。

ES Module (ESM)

是什么?

ES Module 是 ECMAScript 官方标准 的模块化方案,旨在统一浏览器和服务器端的模块化体验。它是现代 JavaScript 的标准。

核心思想:

通过 import 关键字导入模块,通过 export 关键字导出模块。

工作原理与特性:

  1. 异步加载 (Asynchronous): ESM 的设计初衷就考虑了浏览器环境,模块可能需要通过网络加载,因此其底层设计是异步的。浏览器会解析依赖关系,并行下载文件,然后按顺序执行。

    • 为什么是异步? 为了不阻塞浏览器渲染,提升用户体验。
  2. 静态解析 (Static Analysis): import 和 export 语句必须在模块的顶层,不能在条件语句、循环或函数中。

    • 为什么是静态? 这使得构建工具(如 Webpack, Vite)可以在编译时 就确定模块的依赖关系图,而无需执行代码。这是实现 Tree Shaking (摇树优化,即移除未使用的代码) 的基础。
  3. 模块输出的是值的实时绑定 (Live Binding): ESM 导出的是一个引用绑定,而不是一个值的拷贝。如果导出模块内部的变量值发生改变,导入该模块的地方也能感知到这个变化。

相关推荐
Lefan1 分钟前
UniApp 隐私合规神器!一键搞定应用市场审核难题 - lf-auth 隐私合规助手
前端
Null1552 分钟前
浏览器唤起桌面端应用(进阶篇)
前端·浏览器
Jing_Rainbow4 分钟前
【Vue-2/Lesson62(2025-12-10)】模块化与 Node.js HTTP 服务器开发详解🧩
前端·vue.js·node.js
风度前端1 小时前
用了都说好的 uniapp 路由框架
前端
冴羽1 小时前
2026 年 Web 前端开发的 8 个趋势!
前端·javascript·vue.js
码银1 小时前
ruoyi的前端(vue)新增的时候给字典设置默认值 但不能正常
前端
凌览2 小时前
别再死磕 Nginx!http-proxy-middleware 低配置起飞
前端·后端
EndingCoder2 小时前
类的继承和多态
linux·运维·前端·javascript·ubuntu·typescript
用户47949283569152 小时前
React 终于出手了:彻底终结 useEffect 的"闭包陷阱"
前端·javascript·react.js
程序员猫哥2 小时前
前端开发,一句话生成网站
前端