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

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

它可以：

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

⭐️ 特性

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

📦 Install

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

🛠️ 使用方法

`ts
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
`

$3

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

`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;
},
};
`

$3

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

`ts
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'` | 框架类型 |