记落地 vite 到项目中的遇到一个 bug, 最终被 vite 官方 merge pr

我最近在落地vite时，发现启动vite --force时会可能会遇到下面的异常

下午4:45:45 [vite] error while updating dependencies:
Error: ENOENT: no such file or directory, rename '/Users/Documents/bm_outside_manage/node_modules/.vite/deps_temp' -> '/Users/Documents/bm_outside_manage/node_modules/.vite/deps'
    at renameSync (fs.js:797:3)
    at Object.commit (file:///Users/Documents/bm_outside_manage/node_modules/.pnpm/vite@3.2.5_g7xnoo4unxki5ajrpjb2aszkje/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:41746:19)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async commitProcessing (file:///Users/Documents/bm_outside_manage/node_modules/.pnpm/vite@3.2.5_g7xnoo4unxki5ajrpjb2aszkje/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:41220:17)
    at async runOptimizer (file:///Users/Documents/bm_outside_manage/node_modules/.pnpm/vite@3.2.5_g7xnoo4unxki5ajrpjb2aszkje/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:41258:17)
复制代码

从字面的意思大概就是.vite/deps_temp 目录没有被找到。

然后我就打开vite github 试着找寻答案，其中找到类似的这个issue github.com/vitejs/vite…^[1]

经过查看这个issue的评论，可以看出问题是没有解决的。

这时我开始用vscode debugger一下，排查vite代码，说不定还能解决, 提交个pr呢。

说干就干!!

然后新建了一个launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "debug vite",
      "request": "launch",
      "runtimeArgs": ["run-script", "vite"],
      "console": "integratedTerminal",
      "runtimeExecutable": "npm",
      "skipFiles": ["<node_internals>/**"],
      "type": "node"
    }
  ]
}
复制代码

然后在

报错的地方打了一个断点

启动vscode debug vite 断点在文件断住：

经过调试发现

depsCacheDir 是 '/Users/Documents/manage/node_modules/.vite/deps' 这个目录

processingCacheDir 是 '/Users/Documents/manage/node_modules/.vite/deps_temp'

大概从代码上可以看出，先删除deps目录，然后再把deps_temp命名为deps。

本来.vite下会有个deps_temp目录

然后继续往下调试，发现一个神奇的问题

await removeDir(depsCacheDir);

这行代码执行完毕，.vite什么都没了。

removeDir这个很可疑，本来这个方法应该是删除deps目录的，结果把.vite下的所有目录都干掉了。

export const removeDir = isWindows
  ? promisify(gracefulRemoveDir)
  : function removeDirSync(dir: string) {
        fs.rmSync(dir, { recursive: true, force: true })
    }
复制代码

查看发现在mac 上其实只调用了 fs.rmSync 函数, 然后就是开始调查rmSync是不是有问题呢？

这个方法是node14.14 去年刚引入的，说不定真有问题。

抱着试试看的态度，我就开始调试rmSync，发现fs.rmSync 进入不到node源码中，后来排查发现

这个给过滤掉了，修改之后重新调试。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "debug vite",
      "request": "launch",
      "runtimeArgs": ["run-script", "vite"],
      "console": "integratedTerminal",
      "runtimeExecutable": "npm",
      "skipFiles": [],
      "type": "node"
    }
  ]
}
复制代码

发现可以进入node源码了

经过一阵调试发现

进入到这个文件之后就看不懂了。

后来想了想能不能删除目录之前先判断目录存在不存在呢？

经过多次测试，发现这种方法是可以避免这个问题的。然后就开始fork vite代码，提交pr。

github.com/vitejs/vite…^[2]

最后经过对此问题的交流和修改，这个pr得以被merge.

总结：

在遇到问题时，首先去官方issue下搜索问题，如果没有找到解决方案，可能就需要自己去提pr解决了，我们可以利用vscode npm scripts 调试的方式，一步步接近真相。

关于本文

作者：jerome han

https://juejin.cn/post/7184730074497679415

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

 》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持