@meng-xi/vite-plugin


## 项目简介

@meng-xi/vite-plugin 是一个为 Vite 构建工具提供的实用插件库，旨在简化前端项目的构建流程和增强开发体验。该插件库提供了一系列功能强大、配置灵活的插件，帮助开发者更高效地管理项目资源和优化构建过程。

## 项目地址

[github地址](https://github.com/MengXi-Studio/vite-plugin)
[npm包地址](https://www.npmjs.com/package/@meng-xi/vite-plugin)

## 核心功能

### 1. copyFile 插件

**功能描述**：在 Vite 构建完成后，将指定源目录的文件复制到目标目录。

**主要特性**：
- 支持增量复制，只复制修改过的文件
- 支持递归复制整个目录结构
- 可配置是否覆盖已存在的文件
- 详细的日志输出，便于追踪复制状态
- 完善的错误处理机制

**使用场景**：
- 复制静态资源文件到构建输出目录
- 复制配置文件到特定位置
- 在构建过程中同步文件到其他目录

### 2. injectIco 插件

**功能描述**：在 Vite 构建过程中，将图标文件的链接注入到 HTML 文件的 `<head>` 标签中。

**主要特性**：
- 支持自定义图标链接和属性
- 支持配置多个图标文件
- 可选的图标文件复制功能
- 智能检测并避免重复注入
- 支持简洁的字符串配置形式

**使用场景**：
- 为网站添加 favicon 图标
- 配置不同尺寸和格式的图标
- 自动管理图标文件的部署

## 技术特点

- **TypeScript 编写**：提供完整的类型定义，支持智能代码提示
- **模块化设计**：插件之间相互独立，可按需引入
- **配置灵活**：支持详细的配置选项，满足不同场景需求
- **易于使用**：提供简洁的 API 接口，集成成本低
- **性能优化**：支持增量复制，减少不必要的文件操作
- **完善的错误处理**：提供清晰的错误信息和日志输出
- **与 Vite 5.0+ 兼容**：充分利用 Vite 的最新特性

## 快速开始

### 安装

```bash
npm install @meng-xi/vite-plugin --save-dev
# 或
yarn add @meng-xi/vite-plugin --dev
```

### 基本使用

**copyFile 插件**：

```typescript
// 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 插件**：

```typescript
// 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

posted @ 2026-01-28 00:22  PedroQue99  阅读(14)  评论(0)    收藏  举报