乐于分享
好东西不私藏

开箱即用的 Vite 插件工具包 · 灵活强大的插件开发框架

本文最后更新于2026-03-09,某些文章具有时效性,若有错误或已失效,请在下方留言或联系老夜

开箱即用的 Vite 插件工具包 · 灵活强大的插件开发框架

🎯 项目亮点

🚀 开箱即用 – 4 大实用插件助力高效开发

无需重复造轮子,我们为你准备了日常开发中最常用的 Vite 插件:

📦 copyFile– 智能文件复制,支持增量同步、递归复制,构建后自动部署静态资源

🛣️ generateRouter– uni-app 路由自动生成,从 pages.json 到 TypeScript 类型安全路由配置

🏷️ generateVersion– 灵活的版本管理系统,支持时间戳、日期格式等多种版本格式

🎨 injectIco– 网站图标智能注入,自动将 favicon 注入 HTML,支持多尺寸图标适配

import { copyFile, generateRouter, generateVersion, injectIco } from '@meng-xi/vite-plugin'export default defineConfig({  plugins: [    // 一键复制静态资源    copyFile({ sourceDir'src/assets'targetDir'dist/assets' }),    // 自动生成路由配置(uni-app 专属)    generateRouter({ pagesJsonPath'src/pages.json' }),    // 注入版本号    generateVersion({ format'datetime'outputType'both' }),    // 自动注入网站图标    injectIco({ base'/assets' })  ]})

🔧插件开发框架 – 像搭积木一样简单

不仅仅是插件库,更是完整的插件开发解决方案。提供企业级插件开发框架,让自定义插件开发变得前所未有的简单:

BasePlugin 基类 – 插件开发的核心引擎

配置管理– 智能默认值 + 深度合并 + 类型安全

日志系统– 彩色分级日志,单例统一管理,支持按需开关

校验器– 链式 API 配置验证,确保参数正确性

错误处理– 三种错误策略(throw/log/ignore),异步同步全支持

生命周期– 完整的 Vite 钩子支持,灵活控制插件执行时机

import { BasePlugin, createPluginFactory } from '@meng-xi/vite-plugin'class MyCustomPlugin extends BasePlugin<MyOptions> {  // 1. 定义默认配置  protectedgetDefaultOptions() {    return { path: './default', enabled: true }  }    // 2. 验证配置参数  protectedvalidateOptions(): void {    this.validator.field('path').required().string().validate()  }    // 3. 指定插件名称  protectedgetPluginName(): string {    return 'my-custom-plugin'  }    // 4. 添加 Vite 钩子  protectedaddPluginHooks(plugin: Plugin) {    plugin.buildStart = () => {      this.logger.info(`插件启动:${this.options.path}`)    }  }}// 5. 创建工厂函数export const myCustomPlugin = createPluginFactory(MyCustomPlugin)

Logger 日志系统 – 专业级日志管理

🎨彩色输出– 不同类型日志颜色区分(info/success/warn/error)

📦单例模式– 全局统一管理所有插件日志

🔌独立接口– 每个插件拥有独立的日志代理对象

⚙️灵活配置– 支持按插件启用/禁用日志输出

// 插件内部使用this.logger.success('操作成功', { files: 10, time: '23ms' })this.logger.info('配置加载完成')this.logger.warn('检测到过时的配置')this.logger.error('发生错误', error)

Validator 配置校验器 – 链式 API 优雅验证

this.validator  .field('sourceDir')  .required()        // 必填项  .string()          // 字符串类型  .custom(val => val.trim() !== '''不能为空字符串')  .field('targetDir')  .required()  .string()  .validate()

📚完善的工具函数库

除了插件框架,还提供了丰富的公共工具函数:

文件系统– checkSourceExists, copySourceToTarget 等安全文件操作

对象工具– deepMerge 深度合并,isObject 类型判断

格式化– 时间格式化、路径格式化等常用功能

校验工具– 字段验证、类型检查等

🏗️ 技术架构

┌─────────────────────────────────────────────┐│         @meng-xi/vite-plugin                │├─────────────────────────────────────────────┤│  内置插件层                                   ││  ├── copyFile       ├── generateRouter      ││  ├── generateVersion └── injectIco          │├─────────────────────────────────────────────┤│  插件开发框架层                                ││  ├── BasePlugin     ├── Logger              ││  ├── Validator      └── createPluginFactory │├─────────────────────────────────────────────┤│  公共工具层                                   ││  ├── fs (文件操作)  ├── object (对象工具)      ││  ├── format (格式化) └── validation (校验)    │└─────────────────────────────────────────────┘

💡 为什么选择 @meng-xi/vite-plugin?

✨对开发者友好

🎯零配置上手– 内置插件开箱即用,无需复杂配置

📘完整 TypeScript 支持– 全部导出类型定义,IDE 智能提示

📖详细文档– 每个 API 都有清晰的注释和示例

🎨优雅的错误提示– 中文错误信息,快速定位问题

🚀对企业友好

🔒类型安全– 编译时检查,减少运行时错误

🛡️健壮的错误处理– 三种错误策略,适应不同业务场景

📊可定制的日志系统– 生产环境可关闭调试日志

🔧高度可扩展– 基于框架开发自定义插件,满足特殊需求

🌟技术优势

性能优化– 增量复制、智能缓存,构建更快

🔄向后兼容– 支持 Vite 5.x / 6.x / 7.x

📦模块化设计– 支持 CommonJS 和 ES Module

🧪最佳实践– 遵循 Vite 插件开发规范

🎓 适用场景

🎯内置插件直接使用

需要复制静态资源到构建目录

uni-app 项目需要自动生成路由配置

需要在应用中注入版本号

需要为网站自动添加 favicon

🔨基于框架开发自定义插件

企业内部需要定制化的 Vite 插件

需要将现有构建逻辑封装为插件

需要统一管理多个项目的插件配置

需要开发开源 Vite 插件工具

📦 安装使用

# npmnpm install @meng-xi/vite-plugin -D# yarnyarn add @meng-xi/vite-plugin -D# pnpmpnpm add @meng-xi/vite-plugin -D

模块化导入

// 导入所有功能import { copyFile, generateRouter, BasePlugin } from '@meng-xi/vite-plugin'// 按需导入子模块import { copyFile } from '@meng-xi/vite-plugin/plugins'import { BasePlugin } from '@meng-xi/vite-plugin/factory'import { Logger } from '@meng-xi/vite-plugin/logger'import { deepMerge, Validator } from '@meng-xi/vite-plugin/common'

🌈 社区与生态

📄完整文档: https://mengxi-studio.github.io/vite-plugin/

🐛问题反馈: GitHub Issues

📦源码仓库: GitHub Repository

📝更新日志: GitHub Releases

👥 贡献指南

欢迎加入我们的开源社区!

🐛 报告 Bug

💡 提出新功能建议

📝 改进文档

🔧 提交 PR

📄 License

MIT License – 免费用于个人和商业项目

@meng-xi/vite-plugin– 让 Vite 插件开发更简单

如果这个项目对你有帮助,请给我们一个 Star 支持!

本站文章均为手工撰写未经允许谢绝转载:夜雨聆风 » 开箱即用的 Vite 插件工具包 · 灵活强大的插件开发框架

评论 抢沙发

1 + 1 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
×
订阅图标按钮