@anov/vite-plugins

安装

npm install @anov/vite-plugins --save-dev

web2voice 使用指南

在项目构建成功以后插件会自动启动服务，通过 AI 识别项目内容，生成智能的解说文案和音频，可以通过不同的运行参数实现插件的启用和禁用，开启后可以只生成文本或者生成文本和音频。

使用

// vite.config.js
import { defineConfig } from 'vite'
import { webToVoice } from '@anov/vite-plugins'

type WebToVoiceOptions = {
  dpr?: number // device pixel ratio
  quality?: [number, number] // compress quality
  routerMode?: 'history' | 'hash' // router mode
  apiBaseUrl: string // base url
  port?: number // server port
  summarizePrompt?: string // prompt
}

const options:WebToVoiceOptions  =  {}

export default defineConfig({
  plugins: [
    webToVoice(options)
    // other plugins
  ]
})

支持的命令格式

1. 默认构建（插件关闭）

pnpm build:dev

2. 启用插件 - 默认全部生成模式

pnpm build:dev -- --w2v

3. 明确指定模式

# 文本模式
pnpm build:dev -- --w2v-text

# 文本+语音模式
pnpm build:dev -- --w2v-all

4. 直接使用命令

# 所有这些命令都可以直接使用
vite build -- --w2v
vite build -- --w2v-text
vite build -- --w2v-all
vite build -- --w2v=text
vite build -- --w2v=all
vite build -- --w2v text
vite build -- --w2v all

参数解析逻辑

插件会按以下优先级解析参数：

1. --w2v-text → 文本模式
2. --w2v-all → 文本+语音模式
3. --w2v=text → 文本模式
4. --w2v=all → 文本+语音模式
5. --w2v text → 文本模式
6. --w2v all → 文本+语音模式
7. --w2v → 默认文本+语音模式

优势

1. 零配置: 插件自动解析参数，无需额外配置
2. 原生集成: 直接使用 vite build 命令
3. 灵活性: 支持多种参数格式
4. 性能友好: 默认关闭，不影响正常构建
5. 清晰反馈: 详细的构建日志和状态提示

hotReload 使用指南

用于 Anov 框架的 Vite 插件，提供便捷的热重载等功能。

Vue 组件自动热重载插件

这个插件为 Vue 3 组件提供了增强的热模块替换(HMR)功能，使组件能够在修改后保持状态并正确重新初始化。

特性

• 支持组合式 API（<script setup>）和选项式 API 组件
• 懒加载模式：只有组件被路由加载时才注入热重载代码
• 通过全局注册表跟踪组件实例
• 精确注入代码而不影响原有逻辑
• 提供开发者调试工具
• 生产环境自动禁用，零性能影响
• 智能检测：如果组件已定义同名方法，会优先使用组件的方法而不重复声明
• 完全支持 TypeScript：自动检测组件语言类型并保持一致性
• 兼容现有代码：智能处理已存在的 defineExpose，避免重复声明
• 避免导入冲突：自动检测组件已导入的 Vue 函数，避免重复导入
• 尊重单文件组件规范：将热重载代码集成到现有 script 标签，而不是添加新标签

用法

在你的 Vite 配置文件中:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { vueInitHotReload } from '@anov/vite-plugins'

export default defineConfig({
  plugins: [
    vueInitHotReload({
      method: 'init' // 指定重载方法名
    }),
    vue()
    // 其他插件...
  ]
})

配置选项

| 选项 | 类型 | 默认值 | 说明 | | ------ | ------ | ------ | ------------ | | method | string | 'init' | 热重载方法名 |

工作原理

1. 组合式 API 注入:

   • 在<script setup>组件中自动注入init方法和全局注册逻辑
   • 通过defineExpose暴露init方法供热重载使用

2. 选项式 API 注入:

   • 在组件选项中添加init方法和mounted钩子
   • 在mounted钩子中注册组件到全局管理表

3. 热更新处理:

   • 监听组件更新事件
   • 通过全局注册表找到组件实例并调用其init方法