項(xiàng)目簡(jiǎn)介
@meng-xi/vite-plugin 是一個(gè)為 Vite 構(gòu)建工具提供的實(shí)用插件庫(kù)，旨在簡(jiǎn)化前端項(xiàng)目的構(gòu)建流程和增強(qiáng)開發(fā)體驗(yàn)。該插件庫(kù)提供了一系列功能強(qiáng)大、配置靈活的插件，幫助開發(fā)者更高效地管理項(xiàng)目資源和優(yōu)化構(gòu)建過(guò)程。
項(xiàng)目地址
核心功能
1. copyFile 插件
功能描述：在 Vite 構(gòu)建完成后，將指定源目錄的文件復(fù)制到目標(biāo)目錄。
主要特性：
- 支持增量復(fù)制，只復(fù)制修改過(guò)的文件
- 支持遞歸復(fù)制整個(gè)目錄結(jié)構(gòu)
- 可配置是否覆蓋已存在的文件
- 詳細(xì)的日志輸出，便于追蹤復(fù)制狀態(tài)
- 完善的錯(cuò)誤處理機(jī)制
使用場(chǎng)景：
- 復(fù)制靜態(tài)資源文件到構(gòu)建輸出目錄
- 復(fù)制配置文件到特定位置
- 在構(gòu)建過(guò)程中同步文件到其他目錄
2. injectIco 插件
功能描述：在 Vite 構(gòu)建過(guò)程中，將圖標(biāo)文件的鏈接注入到 HTML 文件的 <head> 標(biāo)簽中。
主要特性：
- 支持自定義圖標(biāo)鏈接和屬性
- 支持配置多個(gè)圖標(biāo)文件
- 可選的圖標(biāo)文件復(fù)制功能
- 智能檢測(cè)并避免重復(fù)注入
- 支持簡(jiǎn)潔的字符串配置形式
使用場(chǎng)景：
- 為網(wǎng)站添加 favicon 圖標(biāo)
- 配置不同尺寸和格式的圖標(biāo)
- 自動(dòng)管理圖標(biāo)文件的部署
技術(shù)特點(diǎn)
- TypeScript 編寫：提供完整的類型定義，支持智能代碼提示
- 模塊化設(shè)計(jì)：插件之間相互獨(dú)立，可按需引入
- 配置靈活：支持詳細(xì)的配置選項(xiàng)，滿足不同場(chǎng)景需求
- 易于使用：提供簡(jiǎn)潔的 API 接口，集成成本低
- 性能優(yōu)化：支持增量復(fù)制，減少不必要的文件操作
- 完善的錯(cuò)誤處理：提供清晰的錯(cuò)誤信息和日志輸出
- 與 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'
}
})
]
})
配置選項(xiàng)
copyFile 插件配置
| 選項(xiàng) | 類型 | 必填 | 默認(rèn)值 | 描述 |
|---|---|---|---|---|
| sourceDir | string | 是 | - | 源目錄路徑 |
| targetDir | string | 是 | - | 目標(biāo)目錄路徑 |
| overwrite | boolean | 否 | true | 是否覆蓋已存在的文件 |
| recursive | boolean | 否 | true | 是否遞歸復(fù)制子目錄 |
| incremental | boolean | 否 | true | 是否啟用增量復(fù)制 |
| enabled | boolean | 否 | true | 是否啟用插件 |
| verbose | boolean | 否 | false | 是否啟用詳細(xì)日志 |
| errorStrategy | 'throw' | 'warn' | 否 | 'throw' | 錯(cuò)誤處理策略 |
injectIco 插件配置
| 選項(xiàng) | 類型 | 必填 | 默認(rèn)值 | 描述 |
|---|---|---|---|---|
| base | string | 否 | '/' | 圖標(biāo)路徑的基礎(chǔ) URL |
| url | string | 否 | - | 單個(gè)圖標(biāo) URL（如果提供，將覆蓋 icons 配置） |
| link | string | 否 | - | 單個(gè)圖標(biāo)鏈接標(biāo)簽（如果提供，將直接使用） |
| icons | Array<IconOption> | 否 | - | 圖標(biāo)配置數(shù)組 |
| enabled | boolean | 否 | true | 是否啟用插件 |
| copyOptions | CopyOptions | 否 | - | 圖標(biāo)文件復(fù)制選項(xiàng) |
| verbose | boolean | 否 | false | 是否啟用詳細(xì)日志 |
| errorStrategy | 'throw' | 'warn' | 否 | 'throw' | 錯(cuò)誤處理策略 |
總結(jié)
@meng-xi/vite-plugin 是一個(gè)輕量級(jí)但功能強(qiáng)大的 Vite 插件庫(kù)，為前端項(xiàng)目的構(gòu)建過(guò)程提供了實(shí)用的工具。通過(guò) copyFile 和 injectIco 插件，開發(fā)者可以更方便地管理靜態(tài)資源和圖標(biāo)，減少手動(dòng)操作，提高構(gòu)建效率。
該插件庫(kù)具有良好的可擴(kuò)展性和可維護(hù)性，代碼結(jié)構(gòu)清晰，類型定義完整，是 Vite 項(xiàng)目的理想選擇。
許可證
MIT License
