一、背景
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,但设置后也没解决,若有碰到同样问题,期待您的指导