Vite插件开发秘籍：解锁前端开发新姿势，轻松应对挑战！

最新推荐文章于 2025-04-18 11:16:34 发布

原创

最新推荐文章于 2025-04-18 11:16:34 发布 · 917 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#java #数据库 #开发语言

Vite 插件扩展了设计出色的 Rollup 接口，带有一些 Vite 独有的配置项。因此，你只需要编写一个 Vite 插件，就可以同时为开发环境和生产环境工作。

当创作插件时，你可以在 vite.config.js 中直接使用它。

如果插件不使用 Vite 特有的钩子，可以作为兼容 Rollup 的插件来实现，推荐使用 Rollup 插件名称约定。

插件名称规则

Rollup 插件应该有一个带 rollup-plugin- 前缀、语义清晰的名称。
在 package.json 中包含 rollup-plugin 和 vite-plugin 关键字。

这样，插件也可以用于纯 Rollup 或基于 WMR 的项目。
对于 Vite 专属的插件：

vite-plugin-*

Vite 插件应该有一个带 vite-plugin- 前缀、语义清晰的名称。
在 package.json 中包含 vite-plugin 关键字。
在插件文档增加一部分关于为什么本插件是一个 Vite 专属插件的详细说明（如，本插件使用了 Vite 特有的插件钩子）。

插件配置

// vite.config.js
import vitePlugin from 'vite-plugin-feature'
import rollupPlugin from 'rollup-plugin-feature'

export default defineConfig({
   
   
  plugins: [vitePlugin(), rollupPlugin()],
})

假值的插件将被忽略，可以用来轻松地启用或停用插件。
plugins 也可以接受将多个插件作为单个元素的预设。这对于使用多个插件实现的复杂特性（如框架集成）很有用。该数组将在内部被扁平化（flatten）。

插件扁平化

// 框架插件
import frameworkRefresh from 'vite-plugin-framework-refresh'
import frameworkDevtools from 'vite-plugin-framework-devtools'

export default function framework(config) {
   
   
  return [frameworkRefresh(config), frameworkDevTools(config)]
}

使用插件

// vite.config.js
import {
   
    defineConfig } from 'vite'
import framework from 'vite-plugin-framework'

export default defineConfig({
   
   
  plugins: [framework()],
})

通用钩子

在开发中，Vite 开发服务器会创建一个插件容器来调用 Rollup 构建钩子，与 Rollup 如出一辙。
以下钩子在服务器启动时被调用：

以下钩子会在每个传入模块请求时被调用：

它们还有一个扩展的 options 参数，包含其他特定于 Vite 的属性。你可以在 SSR 文档中查阅更多内容。
一些 resolveId 调用的 importer 值可能是根目录下的通用 index.html 的绝对路径，这是由于 Vite 非打包的开发服务器模式无法始终推断出实际的导入者。对于在 Vite 的解析管道中处理的导入，可以在导入分析阶段跟踪导入者，提供正确的 importer 值。
以下钩子在服务器关闭时被调用：