Vite 插件系统

Vite 本体很精简，它的很多能力其实是靠插件实现的。这一篇我们理解插件解决了什么问题，认识常用插件，并动手写一个最简单的插件。

什么是 Vite 插件

Vite 内部基于 Rollup 的插件接口，并在此之上扩展了一些开发期专属钩子。插件本质上是一组「钩子函数」，在 Vite 启动、处理文件、转译代码、生成产物等不同阶段插入你的逻辑。

比如你想让 Vite 认识 .vue 文件，它本身并不懂，需要 @vitejs/plugin-vue 这个插件来告诉它怎么编译。可以说，没有插件，Vite 只能处理最原始的 JS 和 CSS。

常用插件介绍

官方维护了一系列 @vitejs/plugin-* 插件，最常用的是这几个。

• @vitejs/plugin-vue 让 Vite 支持 Vue 单文件组件。
• @vitejs/plugin-react 提供 React 的 Fast Refresh 和 JSX 支持。
• @vitejs/plugin-legacy 为不支持原生 ESM 的旧浏览器生成兼容打包。

此外社区插件生态非常丰富，例如 vite-plugin-inspect 可以让你在浏览器里查看每个插件对模块做了什么转换，调试时很有用。

在项目中安装和使用插件

以 Vue 项目为例，先安装插件：

npm install -D @vitejs/plugin-vue

然后在 vite.config.js 里通过 plugins 数组引入：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

数组里的顺序一般就是插件的执行顺序，但插件可以用 enforce 字段调整优先级。

enforce 字段控制执行顺序

每个插件可以声明 enforce 来改变它在流水线中的位置。

• enforce: 'pre' 让插件在其他插件之前运行。
• enforce: 'post' 让插件在之后运行。

{
  name: 'my-plugin',
  enforce: 'pre'
}

大多数情况下你不需要关心它，只有当多个插件对同一类文件做处理、出现冲突时才需要调整。

编写一个简单插件

插件就是一个返回带 name 和若干钩子的对象。下面这个插件会在控制台打印每个被处理的文件路径，用于理解钩子如何工作。

// my-plugin.js
export function logFiles() {
  return {
    name: 'log-files',
    transform(code, id) {
      console.log('处理文件：', id)
      return code
    }
  }
}

transform 钩子在 Vite 转译每个模块时调用，code 是源码内容，id 是文件绝对路径。我们在配置里用上它：

import { defineConfig } from 'vite'
import { logFiles } from './my-plugin.js'

export default defineConfig({
  plugins: [logFiles()]
})

启动开发服务器后，终端会逐条打印被加载的文件，你就能直观看到 Vite 的按需编译过程。

用 vite-plugin-inspect 调试

想更深入地看每个插件到底把代码改成了什么样，可以安装 vite-plugin-inspect：

npm install -D vite-plugin-inspect

import inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [inspect()]
})

启动后访问 http://localhost:5173/__inspect/，就能看到每个模块的转换前后对比，排查插件问题非常方便。

本篇小结

• 插件用钩子函数扩展 Vite，Vite 的能力大多来自插件。
• 框架支持靠 @vitejs/plugin-vue / @vitejs/plugin-react。
• enforce 可调整插件执行顺序。
• 简单插件就是带 name 和钩子的对象，vite-plugin-inspect 方便调试。

下一篇我们讲静态资源与样式处理，学会管理图片、CSS、字体这些日常素材。