@anov/hot-reload

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

Vue 组件自动热重载插件

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

特性

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

安装

npm install @anov/hot-reload --save-dev

用法

在你的 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方法