插件系统专题

专题说明

本专题介绍 Vite 插件系统的工作原理与配置方法，帮助开发者理解插件机制并正确使用插件。

学习目标

1. 理解 Vite 插件概念与生命周期
2. 掌握常用插件的配置方法
3. 了解 Rollup 插件兼容性

学习内容

• 插件概念与生命周期：Vite 插件钩子机制
• 常用插件配置：官方与社区插件使用
• Rollup 插件兼容：复用 Rollup 插件

插件条件应用

通过 apply 选项可以控制插件仅在特定阶段生效，避免不必要的开销或冲突。

apply 选项

apply 接受 'serve' 或 'build'，也可通过函数实现更灵活的控制：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [
    vue(), // 默认不传 apply，serve 和 build 都生效

    // 仅在开发服务器启动时生效
    inspect({
      apply: 'serve',
    }),

    // 仅在构建时生效
    {
      name: 'build-only-plugin',
      apply: 'build',
      closeBundle() {
        console.log('构建完成，执行后处理')
      },
    },
  ],
})

函数式条件

// 根据命令动态决定是否启用
{
  name: 'conditional-plugin',
  apply(config, { command }) {
    // command 为 'serve' 或 'build'
    // 只在生产构建且非 SSR 时启用
    return command === 'build' && !config.build?.ssr
  },
}

典型场景

学习建议

实际配置几个常用插件如 vite-plugin-vue，理解插件配置与效果。