前期准备

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

克隆源码

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

创建测试项目

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

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

运行源码

进入 Vite 文件夹

  1. # 进入 vite 具体包的文件夹
  2. $ cd packages/vite
  4. # 开启开发模式，此时 tsc 处于监听状态
  5. $ yarn dev

链接包

源码部分

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

  1. $ yarn link

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

测试代码部分

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

  1. $ 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

如果你看到上面的内容就大功告成啦！