如何 debug Vite 源码

技术 4月 03, 2021

前期准备

在进行源码分析前我们先需要做两个准备

克隆源码

$ git clone https://github.com/vitejs/vite.git
$ yarn install

创建测试项目

事先已经为大家准备好了一个简单的用于 debug 的项目,当然大家也可以自行准备

$ git clone https://github.com/yingpengsha/vite-debug.git
$ yarn install

运行源码

进入 Vite 源码文件夹

# 进入 vite 具体包的文件夹
$ cd packages/vite

# 开启开发模式,此时 tsc 处于监听状态
$ yarn dev

链接包

源码部分

此时应该在源码下的 packages/vite 路径下

$ yarn link

如果成功则会提示 success Registered "vite"

测试代码部分

此时应该在 vite-debug 项目下,或者是你自己用于测试的项目下

$ yarn link vite

如果成功则会提示 success Using linked package for "vite".

验证

此时测试项目下 node_modules/vite 的内容应该已经编程成了源码的内容(类似软链接)
同时项目应该是可以正常运行的,如果无法正常运行的话,请在 yarn unlink vite 后保证项目能正常运行后,再重复上面的步骤

开启 debug 模式运行

如果你使用的测试项目是我提供的 vite-debug,则直接 yarn debug 即可
或者在测试项目下使用 node --inspect-brk ./node_modules/vite/bin/vite.js


image.png


根据运行后提供的端口,我们打开 chrome 的 chrome://inspect, 打开 Open dedicated DevTools for Node,链接指定端口。


image.png


如果你能看到类似于上面的内容就大功告成啦!

Pengsha Ying

逝者如斯,故不舍昼夜