开发优化：自动导入与自动组件注册脚本
概述
将 Vite 配置中调试通过的自动导入逻辑迁移到组件库项目的自动化脚本中。脚本自动生成 vp-auto-imports 和 vp-component-resolve 配置，宿主项目只需导入即可使用。
脚本迁移
从宿主项目到组件库
将在 vite.config.ts 中调试通过的 resolver 配置迁移到组件库的 build/scripts/ 目录：
// build/scripts/gen-vite-config.ts
const pkg = require(path.join(__dirname, '../../package.json'))
const pkgName = pkg.name
// 收集所有 hooks 方法名
const hooks: string[] = []
// ... 扫描 hooks 目录
// 收集所有 directives
const directives: Array<{ name: string; importName: string }> = []
// ... 扫描 directives 目录
typescript
Directive Resolver 生成
前缀处理
// directives 需要处理前缀转换
const directiveEntries = directives.map(d => {
// 去掉 componentPrefix 前缀
const name = d.name
.replace(componentPrefix, '') // 去掉 Vp 前缀
.trim()
// importName 是重新命名的别名
const importName = `VpDirective${capitalize(name)}`
return { name, importName }
})
typescript
生成结果
// vite-config.ts 中自动生成的内容
export const vpComponentResolve = [
{
name: 'VpDirectiveCopy',
importName: 'VpDirectiveCopy',
from: '@el-admin/components',
},
{
name: 'VpDirectiveLoading',
importName: 'VpDirectiveLoading',
from: '@el-admin/components',
},
]
typescript
执行自动化脚本
node build/scripts/gen-vite-config.js
bash
生成文件验证
检查 vite-config.ts 中生成的配置：
// vp-auto-imports: Composition API 自动导入
export const vpAutoImports = {
'@el-admin/components': [
'useTable', 'useForm', 'useUpload',
'useAudioPlayer', 'useVideoPlayer',
// ... 所有 hooks
]
}
// vp-component-resolve: 组件和指令 resolver
export const vpComponentResolve = [
// 组件 resolver
{ type: 'component', resolve: ... },
// 指令 resolver
{ type: 'directive', resolve: ... },
]
typescript
宿主项目使用
// vite.config.ts
import { vpAutoImports, vpComponentResolve } from '@el-admin/components/vite-config'
export default defineConfig({
plugins: [
AutoImport({ imports: [vpAutoImports] }),
Components({ resolvers: [vpComponentResolve] }),
],
})
typescript
验证清单
| 验证项 | 预期结果 |
|---|---|
| watch 正常 | 组件自动注册生效 |
| 复制指令正常 | v-copy 指令可用 |
| 点击复制正常 | 功能交互正常 |
关键要点
- 自动化脚本从
package.json读取组件库名称，避免硬编码 - Directives 的
name字段需使用replace去掉componentPrefix和Vp前缀 - 指令命名规则：
VpDirective + 名称（如VpDirectiveCopy） - 生成后需检查名称格式是否正确，首次生成可能出现命名错误需修正
↑