8. 文件监听与变更事件 ​

我们已经深入了解了 Vite 开发服务器的启动、请求处理和路径解析。但 Vite 最令人称道的特性——闪电般的热模块更新（HMR）——其背后的秘密，我们还未完全揭开。

这个秘密的核心，就是一套高效的**文件监听（File Watching）**机制。

Vite 的“千里眼”：Chokidar ​

Vite 需要一双“火眼金睛”，能够实时、可靠地监控项目中的所有文件变化。它选择的工具，是社区中广受赞誉的库——Chokidar。

Chokidar 是一个跨平台的 Node.js 文件监听库，它解决了原生 fs.watch 和 fs.watchFile 在不同操作系统上存在的诸多问题和不一致性，提供了一个稳定、高效的 API。

当 Vite 服务器启动时，它会创建一个 Chokidar 实例，并告诉它：“请帮我盯着项目根目录下的所有文件。”

从此，Chokidar 就像一个忠诚的哨兵，时刻监视着文件系统。无论是你新增了一个文件、修改了一个文件，还是删除了一个文件，都逃不过它的眼睛。一旦有任何风吹草动，它就会立刻触发一个事件（如 add, change, unlink），并携带变化的文件路径，报告给 Vite 服务器。

从文件变更到浏览器更新：HMR 的完整链路 ​

现在，让我们将文件监听与之前学到的知识串联起来，看看当你按下 Ctrl + S 保存一个文件时，HMR 的完整事件流是怎样的。

假设你修改了 src/components/Button.vue 文件：

1. 哨兵报告 (Chokidar)：Chokidar 立即检测到文件 change 事件，并通知 Vite：“报告！g:\projects\io-books\CoderBooks\mini-vite\src\components\Button.vue 文件刚刚被修改了！”

2. 查找模块节点 (ModuleGraph)：Vite 服务器接收到报告，立刻拿着文件路径去它的“大脑”——**模块图（moduleGraph）**中进行查询，找到代表 Button.vue 的那个模块节点。

3. 失效与传播 (Propagation)：找到节点后，Vite 会做两件事：

   • 标记失效：首先，它会给 Button.vue 节点盖上一个“已失效”的戳。这意味着下次有请求访问它时，需要重新进行转换，而不能使用缓存。
   • 向上冒泡：然后，Vite 会像我们在第二章讨论的那样，顺着模块图中的 importers（导入者）链条向上“冒泡”。它会找到所有直接或间接导入了 Button.vue 的模块（比如 App.vue），并检查它们是否能够“处理”这次热更新。

4. 确定更新边界：冒泡的终点，就是所谓的“HMR 边界”。

   • 如果 App.vue 的代码中包含了处理 Button.vue 更新的逻辑（例如，Vue 框架自身就实现了这种逻辑），那么 App.vue 就是这次更新的边界。Vite 知道，只需要让浏览器重新请求 App.vue 就可以了。
   • 如果冒泡一直到入口文件 main.js 都没有找到能处理更新的模块，那么 Vite 会认为这次变更无法被“热替换”，最终会选择刷新整个页面。

5. 发送指令 (WebSocket)：确定了更新边界后，Vite 会通过之前建立的 WebSocket 连接，向浏览器客户端发送一条精确的指令。这条指令的内容可能是：

   json

   {
     "type": "update",
     "updates": [
       {
         "type": "js-update",
         "path": "/src/App.vue",
         "acceptedPath": "/src/App.vue",
         "timestamp": 1678886400000
       }
     ]
   }

6. 客户端执行 (HMR Client)：浏览器中运行着一小段 Vite 的 HMR 客户端代码。它接收到这条指令后，会立刻发起一个 fetch 请求，去获取新的 /src/App.vue 模块代码。

7. 框架的魔法：获取到新的模块代码后，HMR 客户端会把它交给前端框架（如 Vue、React）的运行时。框架会智能地用新的组件逻辑替换掉旧的组件逻辑，并尽可能地保留组件当前的状态（state），最终实现页面的“无感”更新。

总结：开发服务器的核心循环 ​

至此，我们已经完整地探索了 Vite 开发服务器的核心工作循环：

• 启动：初始化配置、服务器、插件、模块图和监听器。
• 请求：通过中间件管线，按需转换并提供模块，同时构建模块图。
• 监听：通过 Chokidar 监控文件变化。
• 更新：当文件变化时，通过模块图找到影响范围，并通过 WebSocket 通知客户端进行热更新。

这个高效、闭环的系统，共同造就了 Vite 无与伦比的开发体验。理解了这个循环，你就掌握了 Vite Dev Server 的灵魂。

在下一部分，我们将把目光投向 Vite 的另一个强大支柱——插件系统，看看它是如何赋予 Vite 无限的扩展能力的。