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

推荐关注↓

作者:jerome han

https://juejin.cn/post/7184730074497679415

我最近在落地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 调试的方式,一步步接近真相。

参考资料

[1]

github.com/vitejs/vite…: https://github.com/vitejs/vite/issues/9986

[2]

github.com/vitejs/vite…: https://github.com/vitejs/vite/pull/11499


- EOF -


加主页君微信,不仅前端技能+1

主页君日常还会在个人微信分享前端开发学习资源技术文章精选,不定期分享一些有意思的活动岗位内推以及如何用技术做业余项目

加个微信,打开一扇窗



推荐阅读  点击标题可跳转

1、尤雨溪回应:Vite 真的比 Turbopack 慢 10 倍?

2、低代码都做了什么?怎么实现 Low-Code?

3、11+ chrome 高级调试技巧,学会效率直接提升 666%


觉得本文对你有帮助?请分享给更多人

推荐关注「前端大全」,提升前端技能

点赞和在看就是最大的支持❤️

相关推荐

  • 前端重新部署如何通知用户刷新网页?
  • 比亚迪降价出击,油车电车通杀
  • 某大厂,身边的同事都在偷偷搞“副业”
  • ChatGPT 官方版 API,终于来了!
  • 如何检测并清除键盘记录器?
  • 谷歌打响二次反击战:打败李世石的DeepMind最终还是来了!
  • 雅虎正式成立 | 历史上的今天
  • TeaTalk·Online演讲实录|读懂量子世界的应用与未来
  • ChatGPT API 低价上线,网友:用上 import openai,能开一家创业公司!
  • Vue3的语法糖
  • GitHub Blocks:即将向所有用户开放预览,但仍处于“试验阶段”
  • 我们如何将 iOS 应用启动时间减少 60%
  • OPPO 全球混合云建设之路丨QCon 演讲实录
  • 1天烧掉10万美元的ChatGPT正式开放API:成本大砍90%,75万个单词仅收费2美元
  • “干净”的代码,贼差的性能
  • 基于Python的Flask框架开发的在线电影网站系统
  • 携程一面:什么是双亲委派模型?
  • 今天必须讲清楚,到底哪里是苏北了!
  • (待会删)yysd,大家低调浏览!!!
  • 郑州月租1800元“马桶房”爆火:0室0厅1卫,与马桶同睡,却有1.8亿人抢着住!