项目简介
@meng-xi/vite-plugin 是一个为 Vite 构建工具提供的实用插件库，旨在简化前端项目的构建流程和增强开发体验。该插件库提供了一系列功能强大、配置灵活的插件，帮助开发者更高效地管理项目资源和优化构建过程。
项目地址
核心功能
1. copyFile 插件
功能描述：在 Vite 构建完成后，将指定源目录的文件复制到目标目录。
主要特性：
- 支持增量复制，只复制修改过的文件
- 支持递归复制整个目录结构
- 可配置是否覆盖已存在的文件
- 详细的日志输出，便于追踪复制状态
- 完善的错误处理机制
使用场景：
- 复制静态资源文件到构建输出目录
- 复制配置文件到特定位置
- 在构建过程中同步文件到其他目录
2. injectIco 插件
功能描述：在 Vite 构建过程中，将图标文件的链接注入到 HTML 文件的 <head> 标签中。
主要特性：
- 支持自定义图标链接和属性
- 支持配置多个图标文件
- 可选的图标文件复制功能
- 智能检测并避免重复注入
- 支持简洁的字符串配置形式
使用场景：
- 为网站添加 favicon 图标
- 配置不同尺寸和格式的图标
- 自动管理图标文件的部署
技术特点
- TypeScript 编写：提供完整的类型定义，支持智能代码提示
- 模块化设计：插件之间相互独立，可按需引入
- 配置灵活：支持详细的配置选项，满足不同场景需求
- 易于使用：提供简洁的 API 接口，集成成本低
- 性能优化：支持增量复制，减少不必要的文件操作
- 完善的错误处理：提供清晰的错误信息和日志输出
- 与 Vite 5.0+ 兼容：充分利用 Vite 的最新特性
快速开始
安装
npm install @meng-xi/vite-plugin --save-dev
# 或
yarn add @meng-xi/vite-plugin --dev
基本使用
copyFile 插件：
// vite.config.ts
import { defineConfig } from 'vite'
import { copyFile } from '@meng-xi/vite-plugin'
export default defineConfig({
plugins: [
copyFile({
sourceDir: 'src/assets',
targetDir: 'dist/assets'
})
]
})
injectIco 插件：
// vite.config.ts
import { defineConfig } from 'vite'
import { injectIco } from '@meng-xi/vite-plugin'
export default defineConfig({
plugins: [
injectIco({
base: '/assets',
icons: [
{ rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' },
{ rel: 'icon', href: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' }
],
copyOptions: {
sourceDir: 'src/assets/icons',
targetDir: 'dist/assets/icons'
}
})
]
})
配置选项
copyFile 插件配置
| 选项 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| sourceDir | string | 是 | - | 源目录路径 |
| targetDir | string | 是 | - | 目标目录路径 |
| overwrite | boolean | 否 | true | 是否覆盖已存在的文件 |
| recursive | boolean | 否 | true | 是否递归复制子目录 |
| incremental | boolean | 否 | true | 是否启用增量复制 |
| enabled | boolean | 否 | true | 是否启用插件 |
| verbose | boolean | 否 | false | 是否启用详细日志 |
| errorStrategy | 'throw' | 'warn' | 否 | 'throw' | 错误处理策略 |
injectIco 插件配置
| 选项 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| base | string | 否 | '/' | 图标路径的基础 URL |
| url | string | 否 | - | 单个图标 URL（如果提供，将覆盖 icons 配置） |
| link | string | 否 | - | 单个图标链接标签（如果提供，将直接使用） |
| icons | Array<IconOption> | 否 | - | 图标配置数组 |
| enabled | boolean | 否 | true | 是否启用插件 |
| copyOptions | CopyOptions | 否 | - | 图标文件复制选项 |
| verbose | boolean | 否 | false | 是否启用详细日志 |
| errorStrategy | 'throw' | 'warn' | 否 | 'throw' | 错误处理策略 |
总结
@meng-xi/vite-plugin 是一个轻量级但功能强大的 Vite 插件库，为前端项目的构建过程提供了实用的工具。通过 copyFile 和 injectIco 插件，开发者可以更方便地管理静态资源和图标，减少手动操作，提高构建效率。
该插件库具有良好的可扩展性和可维护性，代码结构清晰，类型定义完整，是 Vite 项目的理想选择。
许可证
MIT License
