Vite Plugin Inspect 是由 Antfu 开发的一款 Vite 插件,它的目标是让 Vue、React 等框架的开发者能够更容易地查看和理解构建过程中经过转换的源码。通过集成到 Vite 环境中,Inspect 插件可以在浏览器的开发者工具中直接展示 ES 模块、CSS、甚至是编译后的模板的原始状态,极大地增强了我们在实际开发中的调试能力...
Inspect集成了Vite -plugin- Inspect,允许你检查Vite的转换步骤。了解每个插件如何转换你的代码并发现潜在问题是很有帮助的。 Inspector 你也可以使用“Inspector”特性来检查DOM树,看看是哪个组件在渲染它。单击以转到特定行的编辑器。使更改更容易,而不需要彻底了解项目结构。(此功能基于vite-plugin-vue-inspector实现)...
For Vite v2 to v5, use v0.8.x ofvite-plugin-inspect. If you want to use it with both Vite 6 and below, you can still use v0.8.x, it's forwards compatible. Add plugin to yourvite.config.ts: // vite.config.tsimportInspectfrom'vite-plugin-inspect'exportdefault{plugins:[Inspect()],...
node_modules/vite-plugin-inspect/dist/dist/client' Error: ENOENT: no such file or directory, lstat '/Users/$USER/dev/vite-app/node_modules/.pnpm/vite-plugin-inspect@0.10.4_rollup@4.28.1_vite@6.0.4/node_modules/vite-plugin-inspect/dist/dist/client' ELIFECYCLE Command failed with ...
1.vite-plugin-restart 作用:通过监听文件修改,自动重启 vite 服务。(现在vite好像自带修改配置后自动重启功能了) 最常用的场景就是监听 vite.config.js 和 .env.development 文件,我们知道,修改 vite 配置文件和环境配置文件,是需要重启 vite 才会生效,通过这个插件,我们将从反复重启中解脱出来。
constrollup=require('rollup');constutil=require('util');asyncfunctionbuild(){constbundle=awaitrollup.rollup({input:['./src/index.js'],});console.log(util.inspect(bundle));}build(); 可以看到这样的bundle对象信息: 代码语言:json 复制
关于最后是怎么解决的呢?TMD,竟然是一个object-inspect的库,引用了一个util的包,然后咱们的node_modules里面没有util的包。 这些个中缘由,就不多说了,折腾了两三个小时,解决办法就是一个命令:npm i -S util。 重新执行build和preview后,正常了。
Without this PR (https://arethetypeswrong.github.io/?p=vite-plugin-inspect%400.10.4): With this PR: Linked Issues resolves#125 resolves#126 resolves#129 supersedes#127 Additional context
"debug": "node --inspect-brk=5858 ./node_modules/vite/dist/cli.js" } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 这里使用 node 运行 node_modules 里 vite 包而不是用 npm scripts 的方式,这是 node 应用的调试方式,再配置 vscode 的 launch.json ,指定 vscode 调试 npm scr...