开箱即用的 Vite 插件工具包 · 灵活强大的插件开发框架
🎯 项目亮点
🚀 开箱即用 – 4 大实用插件助力高效开发
📦 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 支持!
夜雨聆风
