小改Vite用于调试React模块在学习React的源码时，我使用了Vite作为脚手架搭建项目，为了弄清楚React各个

最近刚写完毕业设计，寻思着在入职前多学点东西，于是从React(@15.7.0)源码和Vite(^2.2.3)开始学起。

在学习React的源码时，我使用了Vite作为脚手架搭建项目，为了弄清楚React各个模块运行机制，我需要在源码内部插入一些log以及debugger语句然后在浏览器调试代码，这就需要十分频繁地改动源码，如果直接修改React的Git源码并打包给Vite依赖将会十分麻烦并且浪费时间。

相比之下，直接修改Vite脚手架node_modules中的react相关依赖内部的代码就省事多了。于是我尝试修改node_modules/react-dom/lib/ReactMount.js中的_renderSubtreeIntoContainer函数，在函数返回前插入了一条log，启动脚手架查看结果，却意外发现结果并没有按照预想输出"hello world"。

在清除浏览器缓存无果后，我从github拷了份Vite源码，想查清楚究竟是什么导致了依赖没有更新。

在看了Vite打包依赖相关的代码后，我发现，Vite在生成代码时会在node_modules底下生成一个.vite缓存目录，在启动应用时，如果这个目录存在，就会直接引用缓存文件，而不再重新打包依赖，这就导致了我修改了依赖的源码却无法从浏览器得到预想的结果。

那么只要在启动前删除该缓存，让它重新生成就行了，于是我写了个脚本用来删除这个依赖（后来在官网的文档上看其实可以通过带上--force参数清除缓存）

然后在package.json添加一个脚本：

这样，当我修改完依赖模块以后，只需要重新运行一次yarn debug就可以获取最新结果。

但是，这样还是好麻烦。

每次更新完依赖总是需要手动杀死进程后重新运行

yarn debug

要是可以热更新就好了，在修改完依赖模块以后前端直接更新内容。

于是就去看了下Vite热更新相关的实现（在Vite的Github源码里看而不是Vite脚手架的node_modules）。首先在packages/vite/src/server/index.ts中，使用chokider实现了文件监听，监听的根目录是项目根目录，并使用配置的ignored字段排除不需要监听的文件，Vite默认排除了node_modules目录和.git目录，因此这两个目录下的文件无论怎么修改都不会触发热更新，如果我需要借助热更新调试依赖代码，就需要把"node_modules"删除；然后是packages/vite/src/node/server/hmr.ts中的handleHMRUpdate函数，这个函数中判断了热更新的更新方式，当配置中的文件内容发生变动，就会触发服务器重新启动，当客户端代码发生变动，则使用websocket向浏览器发送热更新信号。

前面说到，我想实现依赖更新的话，我需要清理node_modules/.vite目录，那么我就需要重启一次服务器去重新对依赖进行打包，那么我只需要让流程进入restartServer函数所在的代码块即可，于是我对代码做了如下改动：

1. 在packages/vite/src/node/config.ts中，修改UserConfig接口，添加一个extendsWatcher配置项

1. 在packages/vite/src/node/server/hmr.ts中，修改handleHMRUpdate函数的逻辑

前面说过，要实现node_modules模块的监听，还需要实现一个步骤：

1. 在packages/vite/src/server/index.ts中，修改chokidar.watch第二个参数，删除ignored中的"**/node_modules/**"字符串

至此，修改步骤完成，只需要运行

yarn build-vite

就会在packages/vite下生成一个dist目录，将这个dist目录替换掉脚手架中node_modules/vite/dist目录即可。

然后，当你在编辑vite.config.ts时就会发现多了一个配置选项extendsWatcher，说明Vite源码修改成功

在里面写入你希望监听的node_modules下的文件或者目录后，运行

yarn dev --force

就可以实现node_modules依赖模块的热更新。

我希望对react和react-dom两个模块进行监听，于是我的vite.config.ts就是：

当我修改这两个目录下的任意文件时，都会触发服务器重新启动，直接在浏览器调试react代码。

ps：这个改动由于监听了node_modules下的大量目录文件，会导致vite的启动时间大幅增加，因此改动后的Vite版本仅适用于依赖模块的调试，切勿用于正常项目的开发环境。