# vite-plugin-generate-api

**Repository Path**: cc-2018_admin/vite-plugin-generate-api

## Basic Information

- **Project Name**: vite-plugin-generate-api
- **Description**: 根据api文件夹自动生成api的ts类型的vite插件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-05-30
- **Last Updated**: 2024-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript, plugin, vite

## README

# vite-plugin-generate-api

# 介绍
根据api文件夹自动生成api的ts类型

# 使用说明
在使用vue/react+ts开发时,我们把api挂载到全局后,例如封装好axios后需要按模块划分请求,此时会创建一个modules文件夹,里面存放各个模块的请求,**当把module所有的文件都动态挂载到proxy实例上时,我们可以通过proxy.$api.文件名.请求名去发起请求**

**例如：proxy.$api.test_api.test()**

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/adeb04180ddf411b90bd2e3ed7df5139~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=191&h=105&s=3376&e=png&b=252526)

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0bf344ac520c4f4a9b9dccb7c1e2bf67~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=812&h=248&s=49505&e=png&b=1e1e1e)

## 1.动态加载所有api模块并挂载到proxy对象上

```typescript
// src/api/index.ts
// 动态加载module下所有的文件
const files = import.meta.globEager('./module/*.ts')
const models= {}
for (const key in files) {
  const keys = {}


  for (const v in files[key]) {
    Object.assign(keys, { [v]: files[key][v] })
  }
    
  models[key.replace(/(\.\/module\/|\.ts)/g, '')] = keys
}
export default models
```

```typescript
// src/main.ts
import { createApp } from 'vue'
import api from '@/api'
const app = createApp(App)
app.config.globalProperties.$api = api
```

```typescript
//src/xxx.vue
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()!

async function foo(){
    const res = await proxy.$api.xxx()
}

```

## 2.为proxy添加类型提示

​	第一点我们已经完成把所有的请求挂载proxy上并且可以通过proxy.$api.xxx.xxx去发起请求,为proxy添加拥有$api的类型很简单,**只需要在xxx.d.ts文件声明@vue/runtime-core添加类型即可**

```typescript
//src/xx.d.ts
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $api: GlobalApi.Api
  }
}
```

## 3.为$api添加类型提示

### 	3.1在api文件下新建Api.d.ts文件,里面声明所需要的文件类型,如下

```typescript
declare namespace GlobalApi {
  interface Api {
    test_api: typeof import('@/api/module/test_api')
  }
}

```

### 	3.2使用时出现代码提示

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4107fd42dc2842ab8c6f0e4dfcb4eadd~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=299&h=43&s=3180&e=png&b=202020)

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd3673ed903f4073bafb628c03d9fb74~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=825&h=61&s=22095&e=png&b=212121)

## 4.自动生成Api.d.ts文件内容

**以上我们在使用时,Api.d.ts文件内容需要我们手动填写,假如后续modules文件夹文件越来越多,我们希望在改动modules文件夹下的内容时可以自动生成Api.d.ts文件内容**



# 安装教程

```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import { resolve } from 'path' 
import viteGenerateApiPlugin from 'vite-plugin-generate-ts-api'

const pathResolve = (dir:string) => resolve(__dirname, '.', dir)
export default defineConfig({
  plugins:[
    viteGenerateApiPlugin({
      fileName: pathResolve('src/api/Api.d.ts'),
      folderName: pathResolve('src/api/module'),
    }),
  ],
  // .....
});

```



# 软件架构

1.  nodejs
2.  vite
3.  typeScript

# 参与贡献

1.  coder-cc