Vite插件开发指南：轻松驾驭前端开发利器
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
- buildStart
以下钩子会在每个传入模块请求时被调用：
- resolveId
- load
- transform
它们还有一个扩展的 options 参数，包含其他特定于 Vite 的属性。你可以在 SSR 文档 中查阅更多内容。 一些 resolveId 调用的 importer 值可能是根目录下的通用 index.html 的绝对路径，这是由于 Vite 非打包的开发服务器模式无法始终推断出实际的导入者。对于在 Vite 的解析管道中处理的导入，可以在导入分析阶段跟踪导入者，提供正确的 importer 值。 以下钩子在服务器关闭时被调用：
- buildEnd
- closeBundle
请注意 moduleParsed 钩子在开发中是 不会 被调用的，因为 Vite 为了性能会避免完整的 AST 解析。
Vite 独有钩子
Vite 插件也可以提供钩子来服务于特定的 Vite 目标。这些钩子会被 Rollup 忽略。
config
- 类型：
(config: UserConfig, env: { mode: string, command: string }) => UserConfig | null | void - 种类：
async,sequential
在解析 Vite 配置前调用。钩子接收原始用户配置（命令行选项指定的会与配置文件合并）和一个描述配置环境的变量，包含正在使用的 mode 和 command。它可以返回一个将被深度合并到现有配置中的部分配置对象，或者直接改变配置（如果默认的合并不能达到预期的结果）。示例：js
// 返回部分配置（推荐）
const partialConfigPlugin = () => ({
name: 'return-partial',
config: () => ({
resolve: {
alias: {
foo: 'bar',
},
},
}),
})
// 直接改变配置（应仅在合并不起作用时使用）
const mutateConfigPlugin = () => ({
name: 'mutate-config',
config(config, { command }) {
if (command === 'build') {
config.root = 'foo'
}
},
})
注意 用户插件在运行这个钩子之前会被解析，因此在 config 钩子中注入其他插件不会有任何效果。
configResolved
在解析 Vite 配置后调用。使用这个钩子读取和存储最终解析的配置。当插件需要根据运行的命令做一些不同的事情时，它也很有用。
const examplePlugin = () => {
let config
return {
name: 'read-config',
configResolved(resolvedConfig) {
// 存储最终解析的配置
config = resolvedConfig
},
// 在其他钩子中使用存储的配置
transform(code, id) {
if (config.command === 'serve') {
// dev: 由开发服务器调用的插件
} else {
// build: 由 Rollup 调用的插件
}
},
}
}
一个简单的插件示例
{
// 插件名称
name: 'vite-plugin-xxx',
load(code) {
// 钩子逻辑
},
}
如果插件是一个 npm 包，在 package.json 中的包命名也推荐以 vite-plugin 开头 一般情况下因为要考虑到外部传参，我们不会直接写一个对象，而是实现一个返回插件对象的 工厂函数，如下代码所示
// myPlugin.js
export function myVitePlugin(options) {
console.log(options)
return {
name: 'vite-plugin-xxx',
load(id) {
// 在钩子逻辑中可以通过闭包访问外部的 options 传参
}
}
}
// 使用方式
// vite.config.ts
import { myVitePlugin } from './myVitePlugin';
export default {
plugins: [myVitePlugin({ /* 给插件传参 */ })]
}
其中 Vite 会调用一系列与 Rollup 兼容的钩子，这个钩子主要分为三个阶段:
服务器启动阶段: options 和 buildStart 钩子会在服务启动时被调用
请求响应阶段: 当浏览器发起请求时，Vite 内部依次调用 resolveId 、 load 和 transform 钩子
服务器关闭阶段: Vite 会依次执行 buildEnd 和 closeBundle 钩子
config : 用来进一步修改配置 configResolved : 用来记录最终的配置信息 configureServer : 用来获取 Vite Dev Server 实例，添加中间件 transformIndexHtml : 用来转换 HTML 的内容 handleHotUpdate : 用来进行热更新模块的过滤，或者进行自定义的热更新处理
全局自动导入插件 unplugin-auto-import/vite
本身引入的已经是一个插件，由此这里直接导出这个插件
config\plugins\unplugin-auto-import.js
import autoImport from 'unplugin-auto-import/vite' // 全局自动导入插件
const AutoImport = (viteEnv = {}) => {
return autoImport({
imports: [
'vue', // 全局自动导入vue
'vue-router', // 全局自动导入路由插
'pinia',
'@vueuse/core'
],
dts: 'config/auto-imports.d.ts'
})
}
export { AutoImport }
第二个插件 unplugin-vue-define-options/vite
config\plugins\unplugin-vue-define-options.js
import DefineOptions from 'unplugin-vue-define-options/vite' // 使用defineOptions
const options = (viteEnv = {}) => {
return DefineOptions()
}
export { options }
插入组件到全局 vite-plugin-ployfill
config\plugins\vite-plugin-ployfill.js
export default function vitePluginPloyfill() {
return {
name: 'vite-plugin-ployfill', // 插件名称
apply: 'build', // 指定插件的应用阶段
transformIndexHtml(html) {
const script = `
<script>
(function() {
if (typeof EventTarget !== 'undefined') {
const func = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(type, fn, capture) {
this.func = func;
if (typeof capture !== 'boolean') {
capture = capture || {};
capture.passive = false;
}
this.func(type, fn, capture);
};
}
}());
</script>
`
return html.replace('</body>', `${script}</body>`)
}
}
}
export { vitePluginPloyfill }
封装成插件的所有插件
注册插件
config\index.js
加载plugins文件夹下面的所有的插件
const loadPluginModules = async() => {
return new Promise(async(success) => {
const modulesPath = resolve(__dirname, 'plugins')
const fileNames = fs.readdirSync(modulesPath)
const modulesImprot = []
fileNames.forEach(async(item) => {
const filePath = join(modulesPath, item)
if (
fs.statSync(filePath).isFile() &&
['.js'].includes(extname(filePath))
) {
modulesImprot.push(import(`./config/plugins/${item}`))
}
})
const modules = await Promise.all(modulesImprot)
success(modules)
})
}
插件配置
const pluginCfg = async(viteEnv = {}) => {
const modulesArr = [vue(), vueJsx()]
const modules = await loadPluginModules()
modules.forEach((item) => {
const funcs = Object.values(item)
funcs.forEach((it) => {
modulesArr.push(it(viteEnv))
})
})
return modulesArr
}
这里的插件函数，在vite.config.js中异步调用
使用插件
vite.config.js
import { defineConfig, loadEnv } from 'vite'
import { baseCfg, pluginCfg, svgBuilder } from './config'
export default async({ mode }) => {
return defineConfig({
...baseCfg({ mode, loadEnv }),
plugins: [
svgBuilder('./src/icons/svg/'),
...(await pluginCfg())
]
})
}
备注：基本配置在baseCfg中，所有封装的插件在pluginCfg函数中返回到plugins中。
腾讯云开发者
