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 导出的是一个引用绑定,而不是一个值的拷贝。如果导出模块内部的变量值发生改变,导入该模块的地方也能感知到这个变化。

相关推荐
LaughingZhu5 小时前
Product Hunt 每日热榜 | 2026-05-21
前端·人工智能·经验分享·chatgpt·html
怕浪猫5 小时前
Electron 开发实战(一):从零入门核心基础与环境搭建
前端·electron·ai编程
小鹏linux6 小时前
Ubuntu 22.04 部署开源免费具有精美现代web页面的Casdoor账号管理系统
linux·前端·ubuntu·开源·堡垒机
前端若水6 小时前
会话管理:创建、切换、删除对话历史
前端·人工智能·python·react.js
Bigger7 小时前
mini-cc:一个轻量级 AI 编程助手的诞生
前端·ai编程·claude
涵涵(互关)7 小时前
Naive-ui树型选择器只显示根节点
前端·ui·vue
BY组态7 小时前
Ricon组态系统最佳实践:从零开始构建物联网监控平台
前端·物联网·iot·web组态·组态
BY组态7 小时前
Ricon组态系统vs传统组态软件:为什么选择新一代Web组态平台
前端·物联网·iot·web组态·组态
SoaringHeart7 小时前
Flutter进阶:OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter
放下华子我只抽RuiKe57 小时前
React 从入门到生产(四):自定义 Hook
前端·javascript·人工智能·深度学习·react.js·自然语言处理·前端框架