背景:
最近vue3项目在做按钮权限控制,于是按钮权限的code值放在前端项目的page.json文件中,添加按钮权限时只能根据菜单从这份json中选择添加。由于按钮做权限时需要根据v-if判断是否存在这个code值,当在page.json文件添加按钮code时,需要在手动添加code枚举值,于是就写了一个vite的plugins插件脚本自动将page.json文件转为permission-enum.ts文件。
需求:
vue项目中将配置的json文件内容转化为枚举类型的ts文件
page.json:
自动生成的permission-enum.ts文件:
具体代码:
vite.config.ts
import { permissionBuilder } from './plugins/createPermission'
import { defineConfig, type UserConfigExport } from 'vite'
export default ({ mode }: { mode: string }): UserConfigExport =>
defineConfig({
plugins: [
permissionBuilder('./src/permission/')
]
})
plugins/createPermission.ts
import * as fs from 'fs'
import productJSON from '../src/permission/page.json'
export interface PermissionOptions {
label: string
value: string
}
export interface Permissions {
title: string
name: string
permissions: PermissionOptions[]
}
const getOldPermissionCount = (filePath: string): number => {
const oldFileStr = fs.readFileSync(filePath, 'utf8')
return oldFileStr.split('=').length - 1
}
export function permissionBuilder (path: string) {
return {
name: 'permissionsEnum',
buildStart () {
const strArr: string[] = []
let newPermissionCount = 0
productJSON.forEach((item: Permissions) => {
item.permissions.forEach(({ label, value }) => {
strArr.push(`\t${value.toUpperCase()} = '${value}', // ${item.title} - ${label}`)
newPermissionCount++
})
})
const content = `/* eslint-disable @typescript-eslint/indent */\nexport enum PermissionEnum {
${strArr.join('\n')}
}\n`
const filePath = path + 'permission-enum.ts'
const oldPermissionCount = getOldPermissionCount(filePath)
if (newPermissionCount !== oldPermissionCount) {
fs.writeFileSync(filePath, content)
}
}
}
}