@meng-xi/vite-plugin 0.0.9 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README-en.md +345 -268
- package/README.md +331 -254
- package/dist/common/index.cjs +1 -1
- package/dist/common/index.d.cts +101 -2
- package/dist/common/index.d.mts +101 -2
- package/dist/common/index.d.ts +101 -2
- package/dist/common/index.mjs +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.mjs +1 -1
- package/dist/plugins/index.cjs +1 -1
- package/dist/plugins/index.d.cts +361 -167
- package/dist/plugins/index.d.mts +361 -167
- package/dist/plugins/index.d.ts +361 -167
- package/dist/plugins/index.mjs +1 -1
- package/dist/shared/vite-plugin.D6Law9Ke.mjs +706 -0
- package/dist/shared/vite-plugin.D8L9KzuW.cjs +706 -0
- package/dist/shared/vite-plugin.DFjf9wFM.mjs +2 -0
- package/dist/shared/vite-plugin.Tab4qcIM.cjs +2 -0
- package/package.json +1 -1
- package/dist/shared/vite-plugin.BI4kA-bR.mjs +0 -526
- package/dist/shared/vite-plugin.Ba9646wL.cjs +0 -1
- package/dist/shared/vite-plugin.C3ejdBNf.mjs +0 -1
- package/dist/shared/vite-plugin.CsdNNQ-4.cjs +0 -526
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
## 特性
|
|
17
17
|
|
|
18
|
-
- **开箱即用** - 提供
|
|
18
|
+
- **开箱即用** - 提供 7 个实用插件,覆盖构建进度展示、文件复制、路由生成、版本管理、版本更新检查、图标注入、全局 Loading 状态管理等常见场景
|
|
19
19
|
- **插件开发框架** - 导出 BasePlugin、Logger、Validator 等核心组件,快速构建符合规范的自定义 Vite 插件
|
|
20
20
|
- **完整生命周期** - 支持初始化、配置解析、销毁等生命周期管理,自动组合钩子逻辑
|
|
21
21
|
- **类型安全** - 完整的 TypeScript 类型定义,配置验证器确保参数正确性
|
|
@@ -46,7 +46,7 @@ pnpm add @meng-xi/vite-plugin -D
|
|
|
46
46
|
|
|
47
47
|
```typescript
|
|
48
48
|
import { defineConfig } from 'vite'
|
|
49
|
-
import { buildProgress, copyFile, generateRouter, generateVersion,
|
|
49
|
+
import { buildProgress, copyFile, generateRouter, generateVersion, versionUpdateChecker, faviconManager, loadingManager } from '@meng-xi/vite-plugin'
|
|
50
50
|
|
|
51
51
|
export default defineConfig({
|
|
52
52
|
plugins: [
|
|
@@ -71,11 +71,14 @@ export default defineConfig({
|
|
|
71
71
|
outputType: 'both'
|
|
72
72
|
}),
|
|
73
73
|
|
|
74
|
+
// 版本更新检查(配合 generateVersion 使用)
|
|
75
|
+
versionUpdateChecker(),
|
|
76
|
+
|
|
74
77
|
// 注入网站图标(支持字符串简写)
|
|
75
|
-
|
|
78
|
+
faviconManager('/assets'),
|
|
76
79
|
|
|
77
|
-
//
|
|
78
|
-
|
|
80
|
+
// 全局 Loading 状态管理
|
|
81
|
+
loadingManager({
|
|
79
82
|
defaultVisible: true,
|
|
80
83
|
autoHideOn: 'DOMContentLoaded'
|
|
81
84
|
})
|
|
@@ -97,238 +100,17 @@ const routerPlugin = generateRouter({ watch: true }) as PluginWithInstance<Gener
|
|
|
97
100
|
console.log(routerPlugin.pluginInstance?.options)
|
|
98
101
|
```
|
|
99
102
|
|
|
100
|
-
### 开发自定义插件
|
|
101
|
-
|
|
102
|
-
```typescript
|
|
103
|
-
import { BasePlugin, createPluginFactory } from '@meng-xi/vite-plugin'
|
|
104
|
-
import type { BasePluginOptions, PluginWithInstance } from '@meng-xi/vite-plugin/factory'
|
|
105
|
-
import type { Plugin } from 'vite'
|
|
106
|
-
|
|
107
|
-
interface MyPluginOptions extends BasePluginOptions {
|
|
108
|
-
path: string
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
class MyPlugin extends BasePlugin<MyPluginOptions> {
|
|
112
|
-
protected getDefaultOptions() {
|
|
113
|
-
return { path: './default' }
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
protected validateOptions(): void {
|
|
117
|
-
this.validator.field('path').required().string().validate()
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
protected getPluginName(): string {
|
|
121
|
-
return 'my-plugin'
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
protected addPluginHooks(plugin: Plugin): void {
|
|
125
|
-
plugin.buildStart = () => {
|
|
126
|
-
this.logger.info(`Plugin started with path: ${this.options.path}`)
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
protected destroy(): void {
|
|
131
|
-
super.destroy()
|
|
132
|
-
// 自定义清理逻辑,如关闭连接、停止监听等
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
// 基本使用
|
|
137
|
-
export const myPlugin = createPluginFactory(MyPlugin)
|
|
138
|
-
|
|
139
|
-
// 带标准化器(支持字符串简写配置)
|
|
140
|
-
export const myPluginWithNormalizer = createPluginFactory(MyPlugin, opt => (typeof opt === 'string' ? { path: opt } : opt))
|
|
141
|
-
// 使用时支持简写:myPluginWithNormalizer('./custom-path')
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
## 插件开发框架
|
|
145
|
-
|
|
146
|
-
### BasePlugin 核心概念
|
|
147
|
-
|
|
148
|
-
`BasePlugin` 是所有插件的基类,提供了完整的生命周期管理和开发规范:
|
|
149
|
-
|
|
150
|
-
#### 生命周期
|
|
151
|
-
|
|
152
|
-
| 阶段 | 方法 | 说明 |
|
|
153
|
-
| -------- | ------------------ | -------------------------------------- |
|
|
154
|
-
| 初始化 | `constructor` | 合并配置、初始化日志和验证器 |
|
|
155
|
-
| 配置解析 | `onConfigResolved` | Vite 配置解析完成时调用 |
|
|
156
|
-
| 钩子注册 | `addPluginHooks` | 注册 Vite 插件钩子 |
|
|
157
|
-
| 销毁 | `destroy` | `closeBundle` 时自动调用,用于清理资源 |
|
|
158
|
-
|
|
159
|
-
#### 钩子自动组合
|
|
160
|
-
|
|
161
|
-
`toPlugin()` 方法会自动组合以下钩子:
|
|
162
|
-
|
|
163
|
-
- **configResolved** - 先执行基类的 `onConfigResolved`,再执行子类注册的钩子
|
|
164
|
-
- **closeBundle** - 先执行子类注册的钩子,再执行基类的 `destroy`
|
|
165
|
-
|
|
166
|
-
> 子类无需手动注册 `closeBundle` 钩子来清理资源,只需重写 `destroy()` 方法即可。
|
|
167
|
-
|
|
168
|
-
#### 必须实现的方法
|
|
169
|
-
|
|
170
|
-
| 方法 | 说明 |
|
|
171
|
-
| ------------------------ | ------------------ |
|
|
172
|
-
| `getPluginName()` | 返回插件名称 |
|
|
173
|
-
| `addPluginHooks(plugin)` | 添加 Vite 插件钩子 |
|
|
174
|
-
|
|
175
|
-
#### 可选重写的方法
|
|
176
|
-
|
|
177
|
-
| 方法 | 默认行为 | 说明 |
|
|
178
|
-
| -------------------------- | ----------- | ---------------------------------- |
|
|
179
|
-
| `getDefaultOptions()` | 返回 `{}` | 提供插件默认配置 |
|
|
180
|
-
| `validateOptions()` | 无验证 | 验证配置参数 |
|
|
181
|
-
| `getEnforce()` | `undefined` | 插件执行时机(`'pre'` / `'post'`) |
|
|
182
|
-
| `onConfigResolved(config)` | 存储配置 | 配置解析完成回调 |
|
|
183
|
-
| `destroy()` | 注销日志 | 插件销毁时的清理逻辑 |
|
|
184
|
-
|
|
185
|
-
#### 内置属性
|
|
186
|
-
|
|
187
|
-
| 属性 | 类型 | 说明 |
|
|
188
|
-
| ------------ | ------------------------ | ----------------- |
|
|
189
|
-
| `options` | `Required<T>` | 合并后的完整配置 |
|
|
190
|
-
| `logger` | `PluginLogger` | 插件日志记录器 |
|
|
191
|
-
| `validator` | `Validator<T>` | 配置验证器 |
|
|
192
|
-
| `viteConfig` | `ResolvedConfig \| null` | Vite 解析后的配置 |
|
|
193
|
-
|
|
194
|
-
#### 错误处理策略
|
|
195
|
-
|
|
196
|
-
通过 `errorStrategy` 配置项控制错误行为:
|
|
197
|
-
|
|
198
|
-
- `'throw'`(默认)- 记录错误并抛出异常,中断构建
|
|
199
|
-
- `'log'` - 记录错误但不抛出,继续执行
|
|
200
|
-
- `'ignore'` - 记录错误但不抛出,继续执行
|
|
201
|
-
|
|
202
|
-
使用 `safeExecute` / `safeExecuteSync` 包裹可能出错的操作:
|
|
203
|
-
|
|
204
|
-
```typescript
|
|
205
|
-
// 异步安全执行
|
|
206
|
-
const result = await this.safeExecute(async () => {
|
|
207
|
-
return await someAsyncOperation()
|
|
208
|
-
}, '执行异步操作')
|
|
209
|
-
|
|
210
|
-
// 同步安全执行
|
|
211
|
-
const value = this.safeExecuteSync(() => {
|
|
212
|
-
return someSyncOperation()
|
|
213
|
-
}, '执行同步操作')
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
### createPluginFactory
|
|
217
|
-
|
|
218
|
-
创建插件工厂函数,支持选项标准化器:
|
|
219
|
-
|
|
220
|
-
```typescript
|
|
221
|
-
// 基本使用
|
|
222
|
-
const myPlugin = createPluginFactory(MyPlugin)
|
|
223
|
-
|
|
224
|
-
// 带标准化器(支持字符串简写配置)
|
|
225
|
-
const myPlugin = createPluginFactory(MyPlugin, opt => (typeof opt === 'string' ? { path: opt } : opt))
|
|
226
|
-
|
|
227
|
-
// 使用时支持简写
|
|
228
|
-
myPlugin('./custom-path')
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
### Validator
|
|
232
|
-
|
|
233
|
-
流畅的配置验证器,支持链式调用:
|
|
234
|
-
|
|
235
|
-
```typescript
|
|
236
|
-
import { Validator } from '@meng-xi/vite-plugin/common'
|
|
237
|
-
|
|
238
|
-
const validator = new Validator(options)
|
|
239
|
-
validator
|
|
240
|
-
.field('sourceDir')
|
|
241
|
-
.required()
|
|
242
|
-
.string()
|
|
243
|
-
.field('targetDir')
|
|
244
|
-
.required()
|
|
245
|
-
.string()
|
|
246
|
-
.field('overwrite')
|
|
247
|
-
.boolean()
|
|
248
|
-
.default(true)
|
|
249
|
-
.field('port')
|
|
250
|
-
.number()
|
|
251
|
-
.field('list')
|
|
252
|
-
.array()
|
|
253
|
-
.field('config')
|
|
254
|
-
.object()
|
|
255
|
-
.field('name')
|
|
256
|
-
.custom(val => val.length > 0, 'name 不能为空')
|
|
257
|
-
.validate()
|
|
258
|
-
```
|
|
259
|
-
|
|
260
|
-
| 方法 | 说明 |
|
|
261
|
-
| ------------ | -------------------------------------------------- |
|
|
262
|
-
| `field()` | 指定要验证的字段 |
|
|
263
|
-
| `required()` | 标记字段为必填 |
|
|
264
|
-
| `string()` | 验证字段值是否为字符串类型 |
|
|
265
|
-
| `boolean()` | 验证字段值是否为布尔类型 |
|
|
266
|
-
| `number()` | 验证字段值是否为数字类型 |
|
|
267
|
-
| `array()` | 验证字段值是否为数组类型 |
|
|
268
|
-
| `object()` | 验证字段值是否为对象类型 |
|
|
269
|
-
| `default()` | 为字段设置默认值(仅当值为 undefined/null 时生效) |
|
|
270
|
-
| `custom()` | 使用自定义函数验证字段值 |
|
|
271
|
-
| `validate()` | 执行验证,失败时抛出错误 |
|
|
272
|
-
|
|
273
|
-
### Logger
|
|
274
|
-
|
|
275
|
-
全局单例日志管理器,为每个插件提供独立的日志控制:
|
|
276
|
-
|
|
277
|
-
```typescript
|
|
278
|
-
import { Logger } from '@meng-xi/vite-plugin/logger'
|
|
279
|
-
|
|
280
|
-
// 创建日志记录器(通常由 BasePlugin 自动调用)
|
|
281
|
-
Logger.create({ name: 'my-plugin', enabled: true })
|
|
282
|
-
|
|
283
|
-
// 注销插件日志配置(插件销毁时自动调用)
|
|
284
|
-
Logger.unregister('my-plugin')
|
|
285
|
-
|
|
286
|
-
// 销毁单例(测试场景使用)
|
|
287
|
-
Logger.destroy()
|
|
288
|
-
```
|
|
289
|
-
|
|
290
|
-
日志输出格式:
|
|
291
|
-
|
|
292
|
-
```
|
|
293
|
-
ℹ️ [@meng-xi/vite-plugin:my-plugin] Info message
|
|
294
|
-
✅ [@meng-xi/vite-plugin:my-plugin] Success message
|
|
295
|
-
⚠️ [@meng-xi/vite-plugin:my-plugin] Warning message
|
|
296
|
-
❌ [@meng-xi/vite-plugin:my-plugin] Error message
|
|
297
|
-
```
|
|
298
|
-
|
|
299
|
-
### 通用工具函数
|
|
300
|
-
|
|
301
|
-
通过 `@meng-xi/vite-plugin/common` 导出,可在自定义插件中复用:
|
|
302
|
-
|
|
303
|
-
```typescript
|
|
304
|
-
import { deepMerge, formatDate, parseTemplate, toCamelCase, toPascalCase, stripJsonComments, generateRandomHash, Validator } from '@meng-xi/vite-plugin/common'
|
|
305
|
-
import { readFileContent, writeFileContent, fileExists, copySourceToTarget } from '@meng-xi/vite-plugin/common'
|
|
306
|
-
```
|
|
307
|
-
|
|
308
|
-
| 函数 | 说明 |
|
|
309
|
-
| ---------------------- | -------------------------------------------------- |
|
|
310
|
-
| `deepMerge()` | 深度合并对象(undefined 不覆盖,数组直接覆盖) |
|
|
311
|
-
| `formatDate()` | 格式化日期,支持 `{YYYY}`, `{MM}`, `{DD}` 等占位符 |
|
|
312
|
-
| `parseTemplate()` | 解析模板字符串,替换占位符 |
|
|
313
|
-
| `toCamelCase()` | 转换为驼峰命名(camelCase) |
|
|
314
|
-
| `toPascalCase()` | 转换为帕斯卡命名(PascalCase) |
|
|
315
|
-
| `stripJsonComments()` | 移除 JSON 字符串中的注释 |
|
|
316
|
-
| `generateRandomHash()` | 生成随机哈希字符串(1-64 位) |
|
|
317
|
-
| `readFileContent()` | 异步读取文件内容 |
|
|
318
|
-
| `writeFileContent()` | 异步写入文件内容 |
|
|
319
|
-
| `fileExists()` | 异步检查文件是否存在 |
|
|
320
|
-
| `copySourceToTarget()` | 复制文件或目录,支持增量复制和并发控制 |
|
|
321
|
-
|
|
322
103
|
## 内置插件
|
|
323
104
|
|
|
324
|
-
| 插件
|
|
325
|
-
|
|
|
326
|
-
| buildProgress
|
|
327
|
-
| copyFile
|
|
328
|
-
| generateRouter
|
|
329
|
-
| generateVersion
|
|
330
|
-
|
|
|
331
|
-
|
|
|
105
|
+
| 插件 | 说明 |
|
|
106
|
+
| -------------------- | --------------------------------------------------------------- |
|
|
107
|
+
| buildProgress | 终端实时构建进度条,支持 bar / spinner / minimal |
|
|
108
|
+
| copyFile | 构建完成后复制文件或目录,支持增量复制 |
|
|
109
|
+
| generateRouter | 根据 pages.json 自动生成路由配置(uni-app) |
|
|
110
|
+
| generateVersion | 自动生成版本号,支持文件输出和全局变量注入 |
|
|
111
|
+
| versionUpdateChecker | 运行时版本更新检查,支持多种提示样式和自定义回调 |
|
|
112
|
+
| faviconManager | 管理网站图标(favicon)链接注入到 HTML 文件,支持字符串简写配置 |
|
|
113
|
+
| loadingManager | 全局 Loading 状态管理,支持请求拦截和白屏 Loading |
|
|
332
114
|
|
|
333
115
|
### buildProgress
|
|
334
116
|
|
|
@@ -432,7 +214,7 @@ copyFile({
|
|
|
432
214
|
| watch | `boolean` | `true` | 是否监听变化自动重新生成 |
|
|
433
215
|
| metaMapping | `Record<string, string>` | - | 页面 style 字段到 meta 的映射 |
|
|
434
216
|
| exportTypes | `boolean` | `true` | 是否导出类型定义 |
|
|
435
|
-
| preserveRouteChanges | `boolean` | `true`
|
|
217
|
+
| preserveRouteChanges | `boolean` | `true'` | 是否保留用户对 routes 的修改 |
|
|
436
218
|
|
|
437
219
|
> 默认 `metaMapping` 为 `{ navigationBarTitleText: 'title', requireAuth: 'requireAuth' }`,自动将页面样式字段映射到路由元信息。当 `nameStrategy` 为 `'custom'` 时,必须提供 `customNameGenerator`。
|
|
438
220
|
|
|
@@ -531,7 +313,73 @@ generateVersion({
|
|
|
531
313
|
})
|
|
532
314
|
```
|
|
533
315
|
|
|
534
|
-
###
|
|
316
|
+
### versionUpdateChecker
|
|
317
|
+
|
|
318
|
+
在运行时定期检查版本号变更,发现新版本时提示用户刷新页面。通常与 `generateVersion` 插件配合使用。
|
|
319
|
+
|
|
320
|
+
**工作原理:**
|
|
321
|
+
|
|
322
|
+
1. `generateVersion` 在构建时生成版本号文件(`version.json`)或注入全局变量
|
|
323
|
+
2. `versionUpdateChecker` 在运行时定期请求版本文件,与当前版本对比
|
|
324
|
+
3. 发现版本不一致时,弹出提示引导用户刷新
|
|
325
|
+
|
|
326
|
+
| 选项 | 类型 | 默认值 | 描述 |
|
|
327
|
+
| ----------------------- | ------------------------------------ | ------------------------------------------ | ------------------------------------ |
|
|
328
|
+
| versionSource | `'define'` \| `'file'` \| `'auto'` | `'auto'` | 当前版本号来源 |
|
|
329
|
+
| defineName | `string` | `'__APP_VERSION__'` | define 模式下的全局变量名 |
|
|
330
|
+
| checkUrl | `string` | `'/version.json'` | 版本检查文件的 URL 路径 |
|
|
331
|
+
| checkInterval | `number` | `300000` | 检查间隔时间(毫秒,默认 5 分钟) |
|
|
332
|
+
| checkOnVisibilityChange | `boolean` | `true` | 页面可见性变化时是否立即检查 |
|
|
333
|
+
| enableInDev | `boolean` | `false` | 是否在开发模式下启用 |
|
|
334
|
+
| promptStyle | `'modal'` \| `'banner'` \| `'toast'` | `'modal'` | 更新提示 UI 样式 |
|
|
335
|
+
| promptMessage | `string` | `'发现新版本,是否立即刷新获取最新内容?'` | 提示消息文本 |
|
|
336
|
+
| refreshButtonText | `string` | `'立即刷新'` | 刷新按钮文本 |
|
|
337
|
+
| dismissButtonText | `string` | `'稍后再说'` | 忽略按钮文本 |
|
|
338
|
+
| customPromptTemplate | `string` | - | 自定义提示 UI 的 HTML 模板 |
|
|
339
|
+
| customStyle | `string` | - | 自定义 CSS 样式字符串 |
|
|
340
|
+
| onUpdateAvailable | `string` | - | 发现新版本时的回调(函数体字符串) |
|
|
341
|
+
| onRefresh | `string` | - | 用户选择刷新时的回调(函数体字符串) |
|
|
342
|
+
| onDismiss | `string` | - | 用户选择忽略时的回调(函数体字符串) |
|
|
343
|
+
|
|
344
|
+
> `versionSource` 说明:`'define'` 从全局变量读取,`'file'` 从版本文件读取,`'auto'` 优先使用 define,回退到 file。自定义模板中可使用
|
|
345
|
+
> `{{message}}`、`{{currentVersion}}`、`{{newVersion}}`、`{{refreshButton}}`、`{{dismissButton}}` 占位符。回调以函数体字符串形式提供,可用变量:`currentVersion`、`newVersion`。
|
|
346
|
+
|
|
347
|
+
```typescript
|
|
348
|
+
// 基本使用(配合 generateVersion)
|
|
349
|
+
generateVersion({ outputType: 'both' })
|
|
350
|
+
versionUpdateChecker()
|
|
351
|
+
|
|
352
|
+
// 仅从版本文件读取
|
|
353
|
+
versionUpdateChecker({ versionSource: 'file' })
|
|
354
|
+
|
|
355
|
+
// 自定义检查间隔和提示样式
|
|
356
|
+
versionUpdateChecker({
|
|
357
|
+
checkInterval: 60000,
|
|
358
|
+
promptStyle: 'banner'
|
|
359
|
+
})
|
|
360
|
+
|
|
361
|
+
// 底部轻提示
|
|
362
|
+
versionUpdateChecker({ promptStyle: 'toast' })
|
|
363
|
+
|
|
364
|
+
// 自定义提示文本
|
|
365
|
+
versionUpdateChecker({
|
|
366
|
+
promptMessage: '系统已更新,建议刷新体验新功能',
|
|
367
|
+
refreshButtonText: '更新',
|
|
368
|
+
dismissButtonText: '取消'
|
|
369
|
+
})
|
|
370
|
+
|
|
371
|
+
// 自定义回调
|
|
372
|
+
versionUpdateChecker({
|
|
373
|
+
onUpdateAvailable: 'console.log("新版本:", newVersion); return true;',
|
|
374
|
+
onRefresh: 'console.log("用户选择刷新");',
|
|
375
|
+
onDismiss: 'console.log("用户选择忽略");'
|
|
376
|
+
})
|
|
377
|
+
|
|
378
|
+
// 开发环境也启用(调试用)
|
|
379
|
+
versionUpdateChecker({ enableInDev: true })
|
|
380
|
+
```
|
|
381
|
+
|
|
382
|
+
### faviconManager
|
|
535
383
|
|
|
536
384
|
在 Vite 构建过程中将网站图标链接注入到 HTML 文件的 head 中。支持字符串简写配置。
|
|
537
385
|
|
|
@@ -565,13 +413,13 @@ generateVersion({
|
|
|
565
413
|
|
|
566
414
|
```typescript
|
|
567
415
|
// 使用默认配置
|
|
568
|
-
|
|
416
|
+
faviconManager()
|
|
569
417
|
|
|
570
418
|
// 字符串简写(设置 base 路径)
|
|
571
|
-
|
|
419
|
+
faviconManager('/assets')
|
|
572
420
|
|
|
573
421
|
// 自定义图标数组
|
|
574
|
-
|
|
422
|
+
faviconManager({
|
|
575
423
|
base: '/assets',
|
|
576
424
|
icons: [
|
|
577
425
|
{ rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' },
|
|
@@ -581,12 +429,12 @@ injectIco({
|
|
|
581
429
|
})
|
|
582
430
|
|
|
583
431
|
// 自定义完整 link 标签
|
|
584
|
-
|
|
432
|
+
faviconManager({
|
|
585
433
|
link: '<link rel="icon" href="/favicon.svg" type="image/svg+xml" />'
|
|
586
434
|
})
|
|
587
435
|
|
|
588
436
|
// 带文件复制
|
|
589
|
-
|
|
437
|
+
faviconManager({
|
|
590
438
|
base: '/assets',
|
|
591
439
|
copyOptions: {
|
|
592
440
|
sourceDir: 'src/assets/icons',
|
|
@@ -595,7 +443,7 @@ injectIco({
|
|
|
595
443
|
})
|
|
596
444
|
```
|
|
597
445
|
|
|
598
|
-
###
|
|
446
|
+
### loadingManager
|
|
599
447
|
|
|
600
448
|
注入全局 Loading 状态管理,支持 XHR/Fetch 请求拦截、白屏 Loading、自定义样式和生命周期回调。
|
|
601
449
|
|
|
@@ -709,30 +557,30 @@ injectIco({
|
|
|
709
557
|
|
|
710
558
|
```typescript
|
|
711
559
|
// 白屏 Loading:页面加载即显示,DOM 就绪后自动隐藏
|
|
712
|
-
|
|
560
|
+
loadingManager({ defaultVisible: true, autoHideOn: 'DOMContentLoaded' })
|
|
713
561
|
|
|
714
562
|
// 白屏 Loading:所有资源加载完成后隐藏
|
|
715
|
-
|
|
563
|
+
loadingManager({ defaultVisible: true, autoHideOn: 'load' })
|
|
716
564
|
|
|
717
565
|
// Vue/React SPA:白屏即显示,框架渲染完成后手动隐藏
|
|
718
|
-
|
|
566
|
+
loadingManager({ defaultVisible: true, autoHideOn: 'manual' })
|
|
719
567
|
// 在应用入口处:window.__LOADING_MANAGER__.hide()
|
|
720
568
|
|
|
721
569
|
// 自动拦截所有请求
|
|
722
|
-
|
|
570
|
+
loadingManager({ autoBind: 'all' })
|
|
723
571
|
|
|
724
572
|
// 自定义样式 + 请求过滤
|
|
725
|
-
|
|
573
|
+
loadingManager({
|
|
726
574
|
style: { overlayColor: 'rgba(0,0,0,0.5)', spinnerColor: '#fff', backdropBlur: true },
|
|
727
575
|
autoBind: 'fetch',
|
|
728
576
|
requestFilter: { excludeUrls: [/\/api\/health/], excludeUrlPrefixes: ['http://localhost'] }
|
|
729
577
|
})
|
|
730
578
|
|
|
731
579
|
// 防抖隐藏(避免快速闪烁)
|
|
732
|
-
|
|
580
|
+
loadingManager({ debounceHide: { enabled: true, duration: 100 } })
|
|
733
581
|
|
|
734
582
|
// 生命周期回调
|
|
735
|
-
|
|
583
|
+
loadingManager({
|
|
736
584
|
callbacks: {
|
|
737
585
|
onBeforeShow: 'if (shouldSkip) return false;',
|
|
738
586
|
onShow: 'console.log("loading shown")',
|
|
@@ -742,30 +590,259 @@ injectLoading({
|
|
|
742
590
|
})
|
|
743
591
|
|
|
744
592
|
// 手动控制
|
|
745
|
-
|
|
593
|
+
loadingManager()
|
|
746
594
|
window.__LOADING_MANAGER__.show('正在保存...')
|
|
747
595
|
window.__LOADING_MANAGER__.hide()
|
|
748
596
|
window.__LOADING_MANAGER__.toggle()
|
|
749
597
|
window.__LOADING_MANAGER__.disablePointerEvents()
|
|
750
598
|
```
|
|
751
599
|
|
|
600
|
+
## 通用工具函数
|
|
601
|
+
|
|
602
|
+
通过 `@meng-xi/vite-plugin/common` 导出,可在自定义插件中复用:
|
|
603
|
+
|
|
604
|
+
```typescript
|
|
605
|
+
import { deepMerge, formatDate, parseTemplate, toCamelCase, toPascalCase, stripJsonComments, generateRandomHash, Validator } from '@meng-xi/vite-plugin/common'
|
|
606
|
+
import { readFileContent, writeFileContent, fileExists, copySourceToTarget } from '@meng-xi/vite-plugin/common'
|
|
607
|
+
import { injectBeforeTag, injectHtmlByPriority } from '@meng-xi/vite-plugin/common'
|
|
608
|
+
import { makeCallback, containsScriptTag, validateIdentifierName } from '@meng-xi/vite-plugin/common'
|
|
609
|
+
```
|
|
610
|
+
|
|
611
|
+
| 函数 | 说明 |
|
|
612
|
+
| -------------------------- | --------------------------------------------------------------- |
|
|
613
|
+
| `deepMerge()` | 深度合并对象(undefined 不覆盖,数组直接覆盖) |
|
|
614
|
+
| `formatDate()` | 格式化日期,支持 `{YYYY}`, `{MM}`, `{DD}` 等占位符 |
|
|
615
|
+
| `parseTemplate()` | 解析模板字符串,替换占位符 |
|
|
616
|
+
| `toCamelCase()` | 转换为驼峰命名(camelCase) |
|
|
617
|
+
| `toPascalCase()` | 转换为帕斯卡命名(PascalCase) |
|
|
618
|
+
| `stripJsonComments()` | 移除 JSON 字符串中的注释 |
|
|
619
|
+
| `generateRandomHash()` | 生成随机哈希字符串(1-64 位) |
|
|
620
|
+
| `readFileContent()` | 异步读取文件内容 |
|
|
621
|
+
| `writeFileContent()` | 异步写入文件内容 |
|
|
622
|
+
| `fileExists()` | 异步检查文件是否存在 |
|
|
623
|
+
| `copySourceToTarget()` | 复制文件或目录,支持增量复制和并发控制 |
|
|
624
|
+
| `injectBeforeTag()` | 在 HTML 指定闭合标签前注入代码 |
|
|
625
|
+
| `injectHtmlByPriority()` | 按优先级向 HTML 中注入代码(`</head>` → `</body>` → `</html>`) |
|
|
626
|
+
| `makeCallback()` | 将回调函数体包装为安全的函数表达式(含 try-catch) |
|
|
627
|
+
| `containsScriptTag()` | 检测字符串是否包含 `<script>` 标签 |
|
|
628
|
+
| `validateIdentifierName()` | 验证字符串是否为合法的 JavaScript 标识符,防止原型污染 |
|
|
629
|
+
|
|
630
|
+
## 插件开发框架
|
|
631
|
+
|
|
632
|
+
### BasePlugin 核心概念
|
|
633
|
+
|
|
634
|
+
`BasePlugin` 是所有插件的基类,提供了完整的生命周期管理和开发规范:
|
|
635
|
+
|
|
636
|
+
#### 生命周期
|
|
637
|
+
|
|
638
|
+
| 阶段 | 方法 | 说明 |
|
|
639
|
+
| -------- | ------------------ | -------------------------------------- |
|
|
640
|
+
| 初始化 | `constructor` | 合并配置、初始化日志和验证器 |
|
|
641
|
+
| 配置解析 | `onConfigResolved` | Vite 配置解析完成时调用 |
|
|
642
|
+
| 钩子注册 | `addPluginHooks` | 注册 Vite 插件钩子 |
|
|
643
|
+
| 销毁 | `destroy` | `closeBundle` 时自动调用,用于清理资源 |
|
|
644
|
+
|
|
645
|
+
#### 钩子自动组合
|
|
646
|
+
|
|
647
|
+
`toPlugin()` 方法会自动组合以下钩子:
|
|
648
|
+
|
|
649
|
+
- **configResolved** - 先执行基类的 `onConfigResolved`,再执行子类注册的钩子
|
|
650
|
+
- **closeBundle** - 先执行子类注册的钩子,再执行基类的 `destroy`
|
|
651
|
+
|
|
652
|
+
> 子类无需手动注册 `closeBundle` 钩子来清理资源,只需重写 `destroy()` 方法即可。
|
|
653
|
+
|
|
654
|
+
#### 必须实现的方法
|
|
655
|
+
|
|
656
|
+
| 方法 | 说明 |
|
|
657
|
+
| ------------------------ | ------------------ |
|
|
658
|
+
| `getPluginName()` | 返回插件名称 |
|
|
659
|
+
| `addPluginHooks(plugin)` | 添加 Vite 插件钩子 |
|
|
660
|
+
|
|
661
|
+
#### 可选重写的方法
|
|
662
|
+
|
|
663
|
+
| 方法 | 默认行为 | 说明 |
|
|
664
|
+
| -------------------------- | ----------- | ---------------------------------- |
|
|
665
|
+
| `getDefaultOptions()` | 返回 `{}` | 提供插件默认配置 |
|
|
666
|
+
| `validateOptions()` | 无验证 | 验证配置参数 |
|
|
667
|
+
| `getEnforce()` | `undefined` | 插件执行时机(`'pre'` / `'post'`) |
|
|
668
|
+
| `onConfigResolved(config)` | 存储配置 | 配置解析完成回调 |
|
|
669
|
+
| `destroy()` | 注销日志 | 插件销毁时的清理逻辑 |
|
|
670
|
+
|
|
671
|
+
#### 内置属性
|
|
672
|
+
|
|
673
|
+
| 属性 | 类型 | 说明 |
|
|
674
|
+
| ------------ | ------------------------ | ----------------- |
|
|
675
|
+
| `options` | `Required<T>` | 合并后的完整配置 |
|
|
676
|
+
| `logger` | `PluginLogger` | 插件日志记录器 |
|
|
677
|
+
| `validator` | `Validator<T>` | 配置验证器 |
|
|
678
|
+
| `viteConfig` | `ResolvedConfig \| null` | Vite 解析后的配置 |
|
|
679
|
+
|
|
680
|
+
#### 错误处理策略
|
|
681
|
+
|
|
682
|
+
通过 `errorStrategy` 配置项控制错误行为:
|
|
683
|
+
|
|
684
|
+
- `'throw'`(默认)- 记录错误并抛出异常,中断构建
|
|
685
|
+
- `'log'` - 记录错误但不抛出,继续执行
|
|
686
|
+
- `'ignore'` - 记录错误但不抛出,继续执行
|
|
687
|
+
|
|
688
|
+
使用 `safeExecute` / `safeExecuteSync` 包裹可能出错的操作:
|
|
689
|
+
|
|
690
|
+
```typescript
|
|
691
|
+
// 异步安全执行
|
|
692
|
+
const result = await this.safeExecute(async () => {
|
|
693
|
+
return await someAsyncOperation()
|
|
694
|
+
}, '执行异步操作')
|
|
695
|
+
|
|
696
|
+
// 同步安全执行
|
|
697
|
+
const value = this.safeExecuteSync(() => {
|
|
698
|
+
return someSyncOperation()
|
|
699
|
+
}, '执行同步操作')
|
|
700
|
+
```
|
|
701
|
+
|
|
702
|
+
### createPluginFactory
|
|
703
|
+
|
|
704
|
+
创建插件工厂函数,支持选项标准化器:
|
|
705
|
+
|
|
706
|
+
```typescript
|
|
707
|
+
// 基本使用
|
|
708
|
+
const myPlugin = createPluginFactory(MyPlugin)
|
|
709
|
+
|
|
710
|
+
// 带标准化器(支持字符串简写配置)
|
|
711
|
+
const myPlugin = createPluginFactory(MyPlugin, opt => (typeof opt === 'string' ? { path: opt } : opt))
|
|
712
|
+
|
|
713
|
+
// 使用时支持简写
|
|
714
|
+
myPlugin('./custom-path')
|
|
715
|
+
```
|
|
716
|
+
|
|
717
|
+
### Validator
|
|
718
|
+
|
|
719
|
+
流畅的配置验证器,支持链式调用:
|
|
720
|
+
|
|
721
|
+
```typescript
|
|
722
|
+
import { Validator } from '@meng-xi/vite-plugin/common'
|
|
723
|
+
|
|
724
|
+
const validator = new Validator(options)
|
|
725
|
+
validator
|
|
726
|
+
.field('sourceDir')
|
|
727
|
+
.required()
|
|
728
|
+
.string()
|
|
729
|
+
.field('targetDir')
|
|
730
|
+
.required()
|
|
731
|
+
.string()
|
|
732
|
+
.field('overwrite')
|
|
733
|
+
.boolean()
|
|
734
|
+
.default(true)
|
|
735
|
+
.field('port')
|
|
736
|
+
.number()
|
|
737
|
+
.field('list')
|
|
738
|
+
.array()
|
|
739
|
+
.field('config')
|
|
740
|
+
.object()
|
|
741
|
+
.field('name')
|
|
742
|
+
.custom(val => val.length > 0, 'name 不能为空')
|
|
743
|
+
.validate()
|
|
744
|
+
```
|
|
745
|
+
|
|
746
|
+
| 方法 | 说明 |
|
|
747
|
+
| ------------ | -------------------------------------------------- |
|
|
748
|
+
| `field()` | 指定要验证的字段 |
|
|
749
|
+
| `required()` | 标记字段为必填 |
|
|
750
|
+
| `string()` | 验证字段值是否为字符串类型 |
|
|
751
|
+
| `boolean()` | 验证字段值是否为布尔类型 |
|
|
752
|
+
| `number()` | 验证字段值是否为数字类型 |
|
|
753
|
+
| `array()` | 验证字段值是否为数组类型 |
|
|
754
|
+
| `object()` | 验证字段值是否为对象类型 |
|
|
755
|
+
| `default()` | 为字段设置默认值(仅当值为 undefined/null 时生效) |
|
|
756
|
+
| `custom()` | 使用自定义函数验证字段值 |
|
|
757
|
+
| `validate()` | 执行验证,失败时抛出错误 |
|
|
758
|
+
|
|
759
|
+
### Logger
|
|
760
|
+
|
|
761
|
+
全局单例日志管理器,为每个插件提供独立的日志控制:
|
|
762
|
+
|
|
763
|
+
```typescript
|
|
764
|
+
import { Logger } from '@meng-xi/vite-plugin/logger'
|
|
765
|
+
|
|
766
|
+
// 创建日志记录器(通常由 BasePlugin 自动调用)
|
|
767
|
+
Logger.create({ name: 'my-plugin', enabled: true })
|
|
768
|
+
|
|
769
|
+
// 注销插件日志配置(插件销毁时自动调用)
|
|
770
|
+
Logger.unregister('my-plugin')
|
|
771
|
+
|
|
772
|
+
// 销毁单例(测试场景使用)
|
|
773
|
+
Logger.destroy()
|
|
774
|
+
```
|
|
775
|
+
|
|
776
|
+
日志输出格式:
|
|
777
|
+
|
|
778
|
+
```
|
|
779
|
+
ℹ️ [@meng-xi/vite-plugin:my-plugin] Info message
|
|
780
|
+
✅ [@meng-xi/vite-plugin:my-plugin] Success message
|
|
781
|
+
⚠️ [@meng-xi/vite-plugin:my-plugin] Warning message
|
|
782
|
+
❌ [@meng-xi/vite-plugin:my-plugin] Error message
|
|
783
|
+
```
|
|
784
|
+
|
|
785
|
+
### 开发自定义插件示例
|
|
786
|
+
|
|
787
|
+
```typescript
|
|
788
|
+
import { BasePlugin, createPluginFactory } from '@meng-xi/vite-plugin'
|
|
789
|
+
import type { BasePluginOptions, PluginWithInstance } from '@meng-xi/vite-plugin/factory'
|
|
790
|
+
import type { Plugin } from 'vite'
|
|
791
|
+
|
|
792
|
+
interface MyPluginOptions extends BasePluginOptions {
|
|
793
|
+
path: string
|
|
794
|
+
}
|
|
795
|
+
|
|
796
|
+
class MyPlugin extends BasePlugin<MyPluginOptions> {
|
|
797
|
+
protected getDefaultOptions() {
|
|
798
|
+
return { path: './default' }
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
protected validateOptions(): void {
|
|
802
|
+
this.validator.field('path').required().string().validate()
|
|
803
|
+
}
|
|
804
|
+
|
|
805
|
+
protected getPluginName(): string {
|
|
806
|
+
return 'my-plugin'
|
|
807
|
+
}
|
|
808
|
+
|
|
809
|
+
protected addPluginHooks(plugin: Plugin): void {
|
|
810
|
+
plugin.buildStart = () => {
|
|
811
|
+
this.logger.info(`Plugin started with path: ${this.options.path}`)
|
|
812
|
+
}
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
protected destroy(): void {
|
|
816
|
+
super.destroy()
|
|
817
|
+
// 自定义清理逻辑,如关闭连接、停止监听等
|
|
818
|
+
}
|
|
819
|
+
}
|
|
820
|
+
|
|
821
|
+
// 基本使用
|
|
822
|
+
export const myPlugin = createPluginFactory(MyPlugin)
|
|
823
|
+
|
|
824
|
+
// 带标准化器(支持字符串简写配置)
|
|
825
|
+
export const myPluginWithNormalizer = createPluginFactory(MyPlugin, opt => (typeof opt === 'string' ? { path: opt } : opt))
|
|
826
|
+
// 使用时支持简写:myPluginWithNormalizer('./custom-path')
|
|
827
|
+
```
|
|
828
|
+
|
|
752
829
|
## 子路径导出
|
|
753
830
|
|
|
754
831
|
支持按需导入模块,减少打包体积:
|
|
755
832
|
|
|
756
833
|
```typescript
|
|
757
834
|
// 完整导入
|
|
758
|
-
import { buildProgress, copyFile,
|
|
835
|
+
import { buildProgress, copyFile, loadingManager, BasePlugin, Logger } from '@meng-xi/vite-plugin'
|
|
759
836
|
|
|
760
837
|
// 按模块导入
|
|
761
838
|
import { BasePlugin, createPluginFactory } from '@meng-xi/vite-plugin/factory'
|
|
762
839
|
import { Logger } from '@meng-xi/vite-plugin/logger'
|
|
763
|
-
import { buildProgress, copyFile, generateRouter,
|
|
840
|
+
import { buildProgress, copyFile, generateRouter, loadingManager } from '@meng-xi/vite-plugin/plugins'
|
|
764
841
|
import { Validator, readFileContent, writeFileContent } from '@meng-xi/vite-plugin/common'
|
|
765
842
|
|
|
766
843
|
// 类型导入(从子路径按需导入类型定义)
|
|
767
844
|
import type { PluginWithInstance, PluginFactory, BasePluginOptions } from '@meng-xi/vite-plugin/factory'
|
|
768
|
-
import type { BuildProgressOptions, GenerateVersionOptions,
|
|
845
|
+
import type { BuildProgressOptions, GenerateVersionOptions, VersionUpdateCheckerOptions, FaviconManagerOptions, LoadingManagerOptions, Icon } from '@meng-xi/vite-plugin/plugins'
|
|
769
846
|
import type { DateFormatOptions } from '@meng-xi/vite-plugin/common'
|
|
770
847
|
```
|
|
771
848
|
|