vite-plugin-ovit-delivery

Vite 插件：自动检测 OvitDelivery 组件的使用并注入动态导入和局部注册代码。

特性

• ✅ 自动检测：自动检测模板中使用的 OvitDelivery 组件
• ✅ 局部注册：组件只在当前组件作用域内可用，不会污染全局
• ✅ 按需注入：只注入实际使用的组件
• ✅ 自动清理：父组件卸载时，局部引用会被清理
• ✅ 支持 TypeScript：完整的 TypeScript 类型支持

安装

npm install @ovitDelivery/vite-plugin-ovit-delivery --save-dev
# 或
pnpm add @ovitDelivery/vite-plugin-ovit-delivery -D
# 或
yarn add @ovitDelivery/vite-plugin-ovit-delivery -D

在 Monorepo 中使用：

# 在 workspace 中使用
pnpm add @ovitDelivery/vite-plugin-ovit-delivery@workspace:* -D

使用方法

1. 在 vite.config.ts 中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { ovitDeliveryAutoRegister } from '@ovitDelivery/vite-plugin-ovit-delivery'

export default defineConfig({
  plugins: [
    vue(),
    ovitDeliveryAutoRegister({
      // 可选配置
      umdPath: './public/static/cdn/ovitDelivery/index.umd.js', // UMD 文件路径
      debug: false // 是否启用调试日志
    })
  ]
})

2. 在组件中使用

<template>
  <div>
    <!-- 直接使用组件，插件会自动注入局部注册代码 -->
    <OvitButtonConfigRenderer :configs="buttonConfigs" />
  </div>
</template>

<script setup>
// 无需手动导入或注册，插件会自动处理
const buttonConfigs = [
  {
    type: 'button',
    label: '点击我',
    click: () => console.log('clicked')
  }
]
</script>

工作原理

1. 检测组件使用：插件扫描 .vue 文件，检测模板中使用的 OvitDelivery 组件
2. 自动注入代码：在 <script setup> 中注入局部组件声明
3. 动态获取组件：从 window.OvitDeliveryComponents 动态获取组件
4. 局部使用：组件只在当前组件作用域内可用

注入的代码示例

对于 <script setup>：

// 插件自动注入
const OvitButtonConfigRenderer =
  (typeof window !== 'undefined' && window.OvitDeliveryComponents?.OvitButtonConfigRenderer) || null

对于 Options API：

export default {
  components: {
    OvitButtonConfigRenderer:
      (typeof window !== 'undefined' && window.OvitDeliveryComponents?.OvitButtonConfigRenderer) ||
      null
  }
}

配置选项

umdPath (可选)

UMD 文件路径。如果不提供，插件会自动查找以下路径：

• ./public/static/cdn/ovitDelivery/index.umd.js
• ./public/static/cdn/ovitDelivery/ovitDelivery.umd.js

debug (可选)

是否启用调试日志，默认 false。

与全局注册的区别

| 特性 | 全局注册 | 局部注册（本插件） | | -------- | ------------ | ------------------ | | 作用域 | 全局可用 | 只在当前组件可用 | | 清理时机 | 应用关闭 | 父组件卸载 | | 内存占用 | 一直存在 | 随组件卸载清理 | | 代码注入 | 需要手动调用 | 自动注入 |

注意事项

1. CDN 加载：确保 OvitDeliveryComponents 已通过 CDN 加载到 window.OvitDeliveryComponents
2. 组件名称：插件会自动从 UMD 文件中提取组件名称
3. 避免重复：如果代码中已手动处理组件导入，插件不会重复注入

License

MIT