vite项目 查看代码编译过程的插件vite-plugin-inspect

目录

一、问题

二、解决方法

三、总结

---

一、问题

1.有些时候有些bug可能不是自己开发的代码有问题，有可能是第三方代码有bug。要怎么定位第三方代码库的bug呢？

2.需要查看代码的最终编译结果，来推测可能出现问题的步骤

二、解决方法

1. 发现vite有一个插件 vite-plugin-inspect ，可以预览 编译的过程

2.vite-plugin-inspect 使用方法

        1）下载插件     

pnpm install vite-plugin-inspect// vite6.0.1以下指定安装 这个版本
pnpm install vite-plugin-inspect@0.8.9 

        2)  下载时需要注意：下载和vite版本匹配的插件。vite-plugin-inspect  10.x的版本需要使用 Vite v6.0.1及以上版本； 如果Vite 版本在 v6.0.1以下需要使用 V0.8.x 的版本。否则vite和vite-plugin-inspect版本不匹配会报错：

error when starting dev server:
TypeError: Cannot convert undefined or null to objectat Function.keys (<anonymous>)at configResolved (file:///E:/work/dian-ysb-admin/node_modules/.pnpm/vite-plugin-inspect@11.3.2_vite@5.4.11_@types+node@18.19.68_less@4.2.0_sass@1.77.0_terser@5.37.0_/node_modules/vite-plugin-inspect/dist/shared/vite-plugin-inspect.BzUKaD4x.mjs:684:49)at file:///E:/work/dian-ysb-admin/node_modules/.pnpm/vite@5.4.11_@types+node@18.19.68_less@4.2.0_sass@1.77.0_terser@5.37.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66405:67at Array.map (<anonymous>)at resolveConfig (file:///E:/work/dian-ysb-admin/node_modules/.pnpm/vite@5.4.11_@types+node@18.19.68_less@4.2.0_sass@1.77.0_terser@5.37.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66405:53)at async _createServer (file:///E:/work/dian-ysb-admin/node_modules/.pnpm/vite@5.4.11_@types+node@18.19.68_less@4.2.0_sass@1.77.0_terser@5.37.0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:62758:18)at async CAC.<anonymous> (file:///E:/work/dian-ysb-admin/node_modules/.pnpm/vite@5.4.11_@types+node@18.19.68_less@4.2.0_sass@1.77.0_terser@5.37.0/node_modules/vite/dist/node/cli.js:735:20)ELIFECYCLE  Command failed with exit code 1.

        3）vite.config.ts中注册插件

        

// vite.config.ts
import Inspect from 'vite-plugin-inspect'export default {plugins: [Inspect({build: true,opne:true//自动打开 /__insepect/页面})],
}

        4）重新运行代码，会生成一个带有 /__inspect/的地址，点击进入

        5）ctrl+点击打开对应的页面就可以看到所有被编译的文件，搜索可以查看具体的编译过程

三、总结

         1.使用vite-plugin-inspect插件可以方便的查看我们开发的代码实际的编译过程

/*

希望对你有帮助！

如有错误,欢迎指正,谢谢！

*/