自动化脚本优化：为 Vite 自动导入插件准备配置
概述
本节优化组件库项目的自动化构建脚本，为 unplugin-vue-components 和 unplugin-auto-import 自动生成配置文件。核心目标是让宿主项目无需手动编写 resolver 和 imports 配置，直接从组件库导入即可。
前置补充：指令注册
项目中自定义指令页面失效的原因是未调用 setupDirectives 方法：
// main.ts
import { setupDirectives } from '@el-admin/components'
const app = createApp(App)
setupDirectives(app) // 注册自定义指令
typescript
自动化脚本设计
整体架构
组件库 build/scripts/gen-vite-config.ts
│
├── 读取 package.json → 获取组件库名称
│
├── 扫描 hooks/ 目录 → 生成 Composition API 导出列表
│
├── 扫描 directives/ → 生成指令 resolver 配置
│
└── 输出到 vite-config.ts
├── vp-auto-imports (imports 数组)
└── vp-components (resolver 配置)
text
读取组件库名称
const pkg = require(path.join(__dirname, '../../package.json'))
const pkgName = pkg.name // 例如 '@el-admin/components'
typescript
生成 Composition API 导出列表
// 收集所有 hooks 方法名
const compositionAPIs: string[] = []
// 扫描 hooks 目录
const hooksDir = path.join(__dirname, '../src/hooks')
const hookFiles = fs.readdirSync(hooksDir)
hookFiles.forEach(file => {
const content = fs.readFileSync(path.join(hooksDir, file), 'utf-8')
// 提取 export function/useXXX 名称
const matches = content.match(/export\s+(?:const|function)\s+(\w+)/g)
if (matches) {
matches.forEach(m => {
const name = m.replace(/export\s+(?:const|function)\s+/, '')
compositionAPIs.push(name)
})
}
})
typescript
生成 resolver 配置
// 输出到 vite-config.ts 的内容
const output = `
// Auto-generated by build script
import type { ComponentResolver } from 'unplugin-vue-components/types'
export const vpAutoImports = {
'${pkgName}': [${compositionAPIs.map(api => `'${api}'`).join(', ')}]
}
export const vpComponentResolver: ComponentResolver = {
type: 'component',
resolve: (name: string) => {
if (name.startsWith('Vp')) {
return {
name: name.slice(2),
from: '${pkgName}'
}
}
}
}
`
typescript
宿主项目使用方式
// vite.config.ts
import { vpAutoImports, vpComponentResolver } from '@el-admin/components/vite-config'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({
imports: [vpAutoImports],
}),
Components({
resolvers: [vpComponentResolver],
}),
],
})
typescript
生成结果示例
// vp-auto-imports 导出
export const vpAutoImports = {
'@el-admin/components': [
'useTable',
'useForm',
'useUpload',
'useAudioPlayer',
// ... 所有 hooks
]
}
// vp-components resolver
export const vpComponentResolve = [
{ name: 'Button', importName: 'VpButton', from: '@el-admin/components' },
{ name: 'Table', importName: 'VpTable', from: '@el-admin/components' },
// ... 所有组件
]
typescript
关键要点
- 从
package.json的name字段获取组件库包名，避免硬编码 - Composition API 导出为对象形式，key 为包名，value 为方法名数组
- 组件 resolver 使用
name.slice(2)去除Vp前缀匹配原始组件名 - 后续可将
vite-config.ts打包为独立模块，供 Vite 插件直接使用
↑