自动类型生成插件的二次封装
vite-plugin-autogeneration-import-file，这个 vite 插件可以实现自动类型导入。在实际使用过程中，需要配置很多东西，故此处对该插件的使用做一些二次封装，并讲解该如何使用。
安装依赖
毕竟属于对该插件的二次封装，请自行安装依赖：
bash
pnpm i -D vite-plugin-autogeneration-import-file在 vite 配置内使用
使用示例如下：
vite.config.ts
ts
import { defineConfig } from "vite";
// 导入插件
import { createPlugin } from "vite-plugin-autogeneration-import-file";
// 导入辅助工具函数和变量
import {
createDirOptionNameFunction,
pathResolve,
defaultAutoImportTemplate,
} from "@ruan-cat/utils/vite-plugin-autogeneration-import-file";
// 按照教程创建插件
const { autoImport, resolver } = createPlugin();
export default defineConfig({
plugins: [
/** 自动生成类型声明文件插件 */
autoImport([
// components 目录
{
// 文件命名规则
name: createDirOptionNameFunction("Components"),
// 匹配规则 匹配全部的vue组件
pattern: ["**/*.vue"],
// 监听的文件夹
dir: pathResolve("./src/components"),
// 生成的文件
toFile: pathResolve("./types/components-in-components-path.d.ts"),
// 文件生成模板
template: defaultAutoImportTemplate,
codeTemplates: [
{
key: "//code",
template: '{{name}}: typeof import("{{path}}")["default"];\n ',
},
],
},
// views 目录
{
name: createDirOptionNameFunction("Page"),
pattern: ["**/*.vue"],
dir: pathResolve("./src/views"),
toFile: pathResolve("./types/components-in-views-path.d.ts"),
template: defaultAutoImportTemplate,
codeTemplates: [
{
key: "//code",
template: '{{name}}: typeof import("{{path}}")["default"];\n ',
},
],
},
]),
],
});使用的模板
类型文件使用的模板如下：
components.template.ts
ts
/* eslint-disable */
// @ts-nocheck
/**
* 这是特定模板
*/
/* prettier-ignore */
declare module "vue" {
export interface GlobalComponents {
//code
}
}
/* prettier-ignore */
declare global {
//typeCode
}
/* prettier-ignore */
export {};贡献者
ruan-cat