1.准备工作
拉取源码、安装依赖、构建
git clone https://github.com/vitejs/vite
cd vite
pnpm install
pnpm run build
2.开发模式运行vite代码
cd packages/vite
pnpm run dev
dev命令会执行soucemap模式下的构建,方便我们调试代码。
3.软链当前包
pnpm link --global
该命令的作用是从执行此命令的路径或通过
选项指定的文件夹,链接package到全局的node_modules中,所以使其可以被另一个使用pnpm link --global 的package引用。4.运行demo&断点调试
/playground下提供了一部分demo,我们通过运行目录下面的demo对vite进行调试。
在vite源码中标记一处断点,之后可以在demo中使用JavaScript Debug Terminal或者快捷按钮运行dev。例如我现在在处理index.html的方法中标记了一处断点:
在demo中运行dev,命令行会输出开发服务成功启动的提示,由于我们是在处理html的时候打的断点,所以得访问开发服务的地址才会成功进入断点:
tips: 可以在vite命令后带上参数--debug,命令行会输出相关信息方便我们调试。
...
"dev": "vite --debug",
...
5.调试插件
以plugin-vue为例,同理只需要在该插件根目录下运行:
pnpm run dev
则会自动将dist下的入口替换为开发文件的入口:
在源码里标记断点即可进入调试。