如何开发一个 Vite 插件？有哪些常用的钩子函数？

Vite 提供了丰富的插件系统，开发者可以通过插件扩展 Vite 的功能。以下是 Vite 插件开发的关键点：

插件基本结构：

Vite 插件是一个对象，包含 name 属性和各种钩子函数：

javascript
export default function myPlugin() {
  return {
    name: 'my-plugin',
    // 钩子函数
    config(config) {
      // 修改配置
    },
    resolveId(source) {
      // 解析模块 ID
    },
    load(id) {
      // 加载模块内容
    },
    transform(code, id) {
      // 转换代码
    }
  }
}

常用钩子函数：

1. config：修改 Vite 配置，在配置解析后调用
2. configResolved：配置解析完成后调用
3. configureServer：配置开发服务器，可以添加中间件
4. resolveId：自定义模块解析逻辑
5. load：自定义模块加载逻辑
6. transform：转换代码内容（最常用）
7. buildStart/buildEnd：构建开始/结束时调用
8. generateBundle：生成 bundle 时调用

Rollup 插件兼容性：

Vite 插件与 Rollup 插件兼容，大部分 Rollup 插件可以直接在 Vite 中使用。但需要注意：

• Vite 插件在开发环境和生产环境都运行
• 某些 Rollup 特定钩子只在生产环境生效

开发环境特有钩子：

• handleHotUpdate：自定义 HMR 更新逻辑
• configureServer：配置开发服务器
• transformIndexHtml：转换 HTML 文件

插件示例：

javascript
export default function myTransformPlugin() {
  return {
    name: 'my-transform',
    transform(code, id) {
      if (id.endsWith('.js')) {
        return code.replace(/foo/g, 'bar')
      }
    }
  }
}

插件配置：

在 vite.config.js 中使用插件：

javascript
import myPlugin from './my-plugin'

export default {
  plugins: [myPlugin()]
}

最佳实践：

• 插件应该有清晰的命名和文档
• 使用 enforce 选项控制插件执行顺序（pre、post）
• 只处理目标文件，避免不必要的转换
• 提供合理的默认配置和选项