本文探讨了在Vite环境下修改`node_modules`源码后，为何浏览器无法显示改动的问题。通过一系列实验，作者验证了Vite的文档描述，即直接修改`node_modules`和`.vite/deps`的源码不会实时更新到浏览器。只有在执行`vite dev --force`后，修改才会生效。同时，作者尝试了各种方法解决这个问题，包括更改Babel配置，但未成功。最后提出了将源码加入到Vite监听目录的解决方案，但实施后导致浏览器报错。
一、背景
vite下，修改node_modules源码后，在浏览器的源代码中看不到改动的内容，查看vite文档后发现了这么一段话：
对此我专门做了几次实验，来验证我的一些想法
二、实验的前置操作
- 执行
vite dev - 在浏览器打开调试页面，
- 定位到将要改动的源代码文件
- 修改node_modules源码和.vite/deps缓存的源码
为了保证不引导多余的变量，每次实验前都会将node_modle给删除重新安装
三、开始实验
| 操作1 | 操作2 | 浏览器中是否可以看到修改 | .vite/deps是否可以看到修改 |
|---|---|---|---|
| 修改源码 | 直接刷新页面 | ❌ | ❌ |
执行vite dev后，刷新页面 | ❌ | ❌ | |
执行vite dev --force后，刷新页面 | ✅ | ✅ | |
执行vite dev --force后，刷新页面，再次修改代码，刷新页面 | ❌ | ❌ | |
| 修改.vite/deps中源码 | 直接刷新页面 | ❌ | ❌ |
四、结果分析
实验结果与vite官网所说的一致，也验证了我想象中的一些骚操作确实不可行
五、最后的挣扎
既然上诉操作都不可行，那我逆向思考一下，为什么我写的代码可行。这是因为我写的代码在watch的监听目录下，而node_module不在。那么问题就变成了：如何让我修改的源码包含在wath目录下，具体操作查看官网
操作后浏览器报错：
控制台报错
查到一些文档说配置bebel的compact为false，但设置后也没解决，若有碰到同样问题，期待您的指导
扫一扫
4966
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
