如何检查 Vite 插件的中间状态？

背景

Vite 相对来说是比较新型的前端开发工具，能够显著提升前端开发体验。现在我们越来越多的项目基于 Vite 来构建。

想必使用 Vue3 来构建项目的人都用过这个插件 @vitejs/plugin-vue ，这个插件的作用就是对 Vue3 单文件组件提供支持。

如果我们想查看 @vitejs/plugin-vue 插件具体做了什么事怎么实现呢？这时，我们不关心具体细节，只想知道最后产物是什么样的，看源码肯定不是最直观的方式。

其实官方已经提供了方案，写过 Vite 插件的人应该都知道这个插件 vite-plugin-inspect ，通过这个插件，我们能很清晰地看到一个文件经过 Vite 插件的处理，最终变成了什么样的。它可以检查 Vite 插件的中间状态。

接下来，我们就用一个具体的事例，看看这个插件怎么使用。

如何用？

vite-plugin-inspect 插件的使用方式和其他插件一样，也是在 Vite 配置文件中引入，并设置 plugins 即可。

import Inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [..., Inspect()]

  ...
})

配置完成后，除了服务启动外，此时会有一个新服务，其访问地址是：localhost:5173/__inspect/ ，相比项目服务多了一个 path： __inspect ，它的首页长这样：

这里可以查看到我们项目中使用的所有文件，现在我们想看 index.demo-entry.md 这个文件经过了哪些插件处理，每个插件具体做了什么事情。直接点击这个文件，就可以查看具体内容：

最左侧内容列出了这个文件经过了哪些插件的处理，右边是处理前和处理后的具体代码。

在经过 demo-vite 这个插件处理之前，我们可以看到原内容就是一个 md 文档，经过该插件处理后变成一个单文件组件。

这个插件主要是用来将 md 转换成 Vue 组件，主要用来提升组件开发、调试、文档编写的体验。此处不做赘述，后面再出相关文章讨论如何设计组件库。

写在最后

当深入学习 Vite 后，发现它真的是很优秀的一个工具，一方面是因为其体验确实非常好，另外还因为它的简单，至少它把 Vite 插件的开发工作变得很简单。