🎄 @vavt/vite-plugin-auto-export-components

自动扫描指定目录下的组件，并生成统一的入口文件。

它可以：

• 将目录名（如 my-component或MyComponent）转换成带有自定义前缀的 PascalCase 组件名（如 VlMyComponent）。
• 只处理一级目录，且目录中必须存在 index.ts 文件。
• 在开发过程中自动监听文件变化并更新。
• 支持自定义扫描目录、输出文件名以及组件前缀。

⭐️ 特性

• 多框架支持：支持 Vue 和 React（通过 framework 选项切换）。
• 自动导入与导出：自动导入和导出所有符合规则的组件。
• 自定义前缀：可以自由配置组件名称的前缀（默认是 Vl）。
• 热更新：组件新增或删除时自动重新生成入口文件。
• 默认目录：默认扫描 components 目录。
• 简单集成：无需复杂配置，可直接与项目集成。

📦 Install

yarn add @vavt/vite-plugin-auto-export-components -D

🛠️ 使用方法

import { autoExportComponents } from '@vavt/vite-plugin-auto-export-components';

export default {
  plugins: [
    autoExportComponents({
      dir: 'components', // 默认为 'components'
      output: 'index.ts', // 默认为 'index.ts'
      prefix: 'Vl', // 默认为 'Vl'
      extra: '', // 默认为空
    }),
  ],
};

📁 示例

假设你的项目目录结构如下：

components/
  card/
    index.ts
  video-player/
    index.ts

Vue (默认)

插件会自动生成一个入口文件（如 components/index.ts），内容如下：

import { VlCard } from './card';
import { VlVideoPlayer } from './video-player';

export * from './card';
export * from './video-player';

const components = [VlCard, VlVideoPlayer];

export default {
  install: (app: App) => {
    components.forEach((c) => app.use(c));
    return app;
  },
};

React

如果配置 framework: 'react'，生成的内容如下：

export * from './card';
export * from './video-player';

注意：如果某个目录下没有 index.ts 文件，该目录将不会被处理。

🧩 配置项

| 参数 | 类型 | 默认值 | 说明 | | ----------- | ------------------ | -------------- | ------------------ | | dir | string | 'components' | 需要扫描的目录路径 | | output | string | 'index.ts' | 生成的入口文件名 | | prefix | string | 'Vl' | 组件名称的前缀 | | extra | string | '' | 额外的导入语句 | | framework | 'vue' \| 'react' | 'vue' | 框架类型 |