0%

2022-03-19 基于 swagger 和 vite 自动生成 typescript 接口

2022-03-19 基于 swagger 和 vite 自动生成 typescript 接口

vite:https://cn.vitejs.dev/

swagger:https://swagger.io/

vite-plugin-swagger-typescript-api:https://github.com/CaoMeiYouRen/vite-plugin-swagger-typescript-api

最近发现了 swagger-typescript-api 这个有趣的包,可以根据 swagger 自动生成 typescript api 接口,前端直接省去了对接的工夫。我在想如果和 vite 对接,那么不就能实现自动化了吗?

说干就干,本人编写了 vite-plugin-swagger-typescript-api 这个 npm 包,该插件只有一个功能,就是在 vite 开发环境下自动调用 swagger-typescript-api 生成 typescript api 接口,在生产环境下不会调用。

安装

1
2
3
4
# 本插件依赖 swagger-typescript-api、vite ,故需要先安装
npm i -D swagger-typescript-api vite

npm i -D vite-plugin-swagger-typescript-api

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 在 vite.config.ts 文件中添加如下配置
import { defineConfig } from 'vite'
import { vitePluginSwaggerTypescriptApi } from 'vite-plugin-swagger-typescript-api'


// vite 相关配置请参考 https://vitejs.dev/config/
export default defineConfig({
plugins: [
vitePluginSwaggerTypescriptApi({ // swagger-typescript-api 的配置,具体可参考 https://github.com/acacode/swagger-typescript-api
name: 'myApi.ts', //要生成的文件名称
output: path.resolve('./src/apis'), // 生成的文件所在的文件夹,注意要使用 path.resolve 解析出绝对路径,否则路径可能会有错误
input: path.resolve('./swagger.json'), // 从本地文件载入,路径问题同 output
url: "http://api.com/swagger.json", // 如果从远程接口载入
httpClientType: 'axios', // or "fetch" 生成的接口类型
})
]
})

在执行 vite 命令后可在 src\apis\myApi.ts 路径看到生成的文件,每次启动开发环境时会去生成 api 文件,生产环境(编译时)不会调用。

更多内容请参考插件文档。

本文作者:草梅友仁
本文地址: https://blog.cmyr.ltd/archives/71b29e7.html
版权声明:转载请注明出处!

坚持原创技术分享,您的支持将鼓励我继续创作!