二、考察点分析

核心能力维度：构建工具原理理解、插件系统适配能力、框架生态实践能力
技术评估点：

  1. Vite插件体系与Rollup的继承关系
  2. rollupOptions配置项的正确使用场景
  3. 专属插件对Vite特有功能（如HMR、预构建）的支持方式
  4. 通用Rollup插件在开发/生产模式下的兼容差异
  5. 插件执行顺序控制策略

三、技术解析

关键知识点

Vite插件API > Rollup插件规范 > 构建生命周期差异

原理剖析

Vite基于Rollup核心实现构建能力，通过扩展Rollup插件接口形成自己的插件系统。关键技术差异点：

  1. 双模式差异：开发模式使用Koa中间件架构，生产打包复用Rollup
  2. 插件结构：Vite插件需实现enforce: 'pre'|'post'控制执行顺序，并支持apply: 'build'|'serve'区分模式
  3. 特有钩子：如configureServer处理开发服务器，transformIndexHtml修改入口HTML
  4. 兼容机制：通过rollupOptions.inputPlugins显式声明Rollup插件
// vite.config.js
export default {
  plugins: [vitePlugin1, vitePlugin2],
  build: {
    rollupOptions: {
      plugins: [rollupPlugin1(), rollupPlugin2()] // Rollup专属插件
    }
  }
}

常见误区

  1. 盲目混用插件导致构建错误（如同时使用@vitejs/plugin-react和@rollup/plugin-babel）
  2. 未正确处理SSR场景下的插件配置
  3. 开发模式下误用Rollup专有阶段钩子

四、问题解答

Vite插件生态已形成完整的工具链体系，覆盖框架支持（React/Vue）、CSS处理、静态资源加载等场景。通过build.rollupOptions.plugins数组可注入Rollup插件，但需注意：

  1. 专属插件差异：
    Vite插件可直接处理HMR、环境变量注入等特性（如@vitejs/plugin-vue），而Rollup插件（如rollup-plugin-image）主要处理资源加载等通用任务

  2. 使用示例：

// vite.config.js
import image from '@rollup/plugin-image'

export default {
  plugins: [/* Vite插件 */],
  build: {
    rollupOptions: {
      plugins: [image()] // Rollup插件
    }
  }
}

五、解决方案

编码示例 

// 自定义Vite插件示例
const viteCustomPlugin = () => ({
  name: 'vite-custom',
  // Vite专属钩子
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      console.log('Request:', req.url)
      next()
    })
  },
  // 通用钩子
  transform(code, id) {
    if (/\.vue$/.test(id)) {
      return code.replace(/__VERSION__/g, '3.2.0')
    }
  }
})

// Rollup插件示例（需通过rollupOptions注入）
const rollupAssetPlugin = {
  name: 'rollup-asset',
  transform(code, id) {
    if (/\.custom$/.test(id)) {
      return `export default ${JSON.stringify(code)}`
    }
  }
}

可扩展性建议

  1. 环境判断：通过process.env.NODE_ENV区分插件加载
  2. 按需加载：动态导入大型插件（如vite-plugin-pwa）
  3. 性能优化：开发模式禁用耗时的构建插件

六、深度追问

  1. 如何处理Vite插件和Rollup插件的执行顺序？
    答：通过enforce字段控制插件执行阶段（pre/normal/post）

  2. 哪些Rollup插件无法在Vite中使用？
    答：依赖Rollup特有阶段（如generateBundle）的插件在开发模式失效

  3. 如何编写同时兼容Vite和Rollup的插件？
    答：使用条件导出+特性检测，区分调用环境API

Edit this page

Last updated a month ago. history