Vite插件,自动扫描指定目录下的组件,并生成统一的入口文件。
npm install @vavt/vite-plugin-auto-export-components自动扫描指定目录下的组件,并生成统一的入口文件。
它可以:
- 将目录名(如 my-component或MyComponent)转换成带有自定义前缀的 PascalCase 组件名(如 VlMyComponent)。
- 只处理一级目录,且目录中必须存在 index.ts 文件。
- 在开发过程中自动监听文件变化并更新。
- 支持自定义扫描目录、输出文件名以及组件前缀。
- 多框架支持:支持 Vue 和 React(通过 framework 选项切换)。
- 自动导入与导出:自动导入和导出所有符合规则的组件。
- 自定义前缀:可以自由配置组件名称的前缀(默认是 Vl)。
- 热更新:组件新增或删除时自动重新生成入口文件。
- 默认目录:默认扫描 components 目录。
- 简单集成:无需复杂配置,可直接与项目集成。
``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
插件会自动生成一个入口文件(如 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;
},
};
`
如果配置 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'` | 框架类型 |