从头看 vite 源码 - 调试

前言

准备开一个系列，记录学习 vite 源码的过程。

首先准备的是 vite 源码调试环境。

如何调试

vite 对调试的支持非常好。这里看的 vite 源码版本为：7.1.7，打包工具为 rolldown。

首先 clone 项目。

git clone https://github.com/vitejs/vite.git

vite 采用 monorepo 架构，使用 pnpm 作为包管理工具，这个版本使用 rolldown 作为打包工具。

在根目录下，有两个文件夹：

• packages
• playground

packages 中存放着 vite 相关的包，包括源代码。

playground 中则是存放项目示例。

先说答案，如何调试。

1. 进入 packages/vite
2. 执行 npm run dev
3. 进入 playground 文件夹，找到一个感兴趣的项目
4. 进入并执行 pnpm run debug
5. 打开谷歌浏览器
6. 进入 chrome://inspect/#devices
7. 找到 localhost:9229 (v22.19.0) 并点击 inspect 按钮
8. 弹出调试窗口

说明

2. 执行 npm run dev

这一步主要是执行 npm run dev 命令。这个命令其实是 premove dist && pnpm build-bundle -w -s。

可以看到这个命令由两部分组成，一部分删除 dist 文件夹。后面一部分则是使用 watch 模式打包。

4. 进入并执行 pnpm run debug

这个命令其实是"node --inspect-brk ../../packages/vite/bin/vite"，主要作用是进入调试模式。

node --inspect-brk 是 Node.js 的调试参数。

• --inspect

  启动 Node inspector（调试协议），监听默认端口 9229，允许你用 Chrome DevTools / VS Code attach 调试。

• --inspect-brk

  跟 --inspect 的区别是：在程序的第一行就暂停，等你连接上调试器后再继续执行。

同时在 vite 脚手架代码中也对调试命令做了处理。

const inspector = await import('node:inspector').then((r) => r.default)
  const session = (global.__vite_profile_session = new inspector.Session())
  session.connect()
  session.post('Profiler.enable', () => {
    session.post('Profiler.start', start)
  })

5. 打开谷歌浏览器

8. 弹出调试窗口