free-swagger
根据 swagger 文档，自动生成前端代码
效果展示
复制 api 代码
复制/递归复制 interface/typedef
复制 api 路径
复制全量 interface
复制全量 typedef
复制 mock 代码
api 搜索
命令行使用
解决的问题
- 自动生成 api 代码
- 自动生成 interface/typedef
- 生成的 interface 支持泛型
- 自动生成 mock 代码
- 支持 swagger 文档内搜索 api
优势
- chrome 插件，油猴脚本，命令行，npm script 等多种接入方式，开箱即用
- 支持 javascript/typescript 两种语言
- 支持自定义模版，使用纯 javascript 编写，上手成本低
- 支持直接在现有 swagger 文档使用，接入极其简单
- 自动生成 interface，并自带泛型
- 自动生成的接口代码更符合开发者普遍认知
- 大量单元测试，保证产品质量
- 字节程序员潜心开发 2 年，超过 200 多个 release 版本
- 字节同事亲测，非常实用
架构图
安装 & 快速上手
列举了两种常用的安装方式
chrome 插件
优势：
- 接入更简单
- 无需担心文档权限问题
- 增量生成代码片段，可控性更强
缺点：
- 无法全量写入文件
安装
访问安装地址，点击安装 free-swagger
之后浏览器右上角会显示小图标
如果之前安装过 chrome 插件，在扩展程序中置顶该插件
快速上手
在需要开启插件的 swagger 网页中，点击右上角 free-swagger 图标
此时会在网页下放发现多了一个操作栏，并且 free-swagger 图标被激活，祝贺您获得了 swagger-ui 的拓展能力
node
优势：
- 支持全量写入文件
- 运行在 node 环境，可以与 CI/CD 工具结合
缺点：
- 相比于 chrome 插件，参数较多，配置稍繁琐（但只需配置一次）
- 无法增量生成文件
安装
npm i free-swagger -D
新建 swagger.config.js
// swagger.config.js
const freeSwagger = require("free-swagger")
// 配置项，见 https://www.npmjs.com/package/free-swagger
freeSwagger(freeSwaggerConfig)
更多配置参考 demo
demo: github.com/yeyan1996/f…
快速上手
推荐绑定为 npm script ，在项目初始化时自动更新 api 文件
// package.json
{
"scripts": {
"serve": "start",
"preserve": "npm run swagger",
"swagger": "node swagger.config.js"
},
"devDependencies": {
"free-swagger": "^5.2.5"
}
}
仓库地址
仓库为 monorepo，提供多种接入方式
- chrome 浏览器插件: free-swagger-extension
- 命令行: free-swagger-cli
- 油猴脚本: free-swagger-userscript
- node: free-swagger
觉得好用的话，务必点个 star，这是对我最大的支持
相关竞品
- swagger-codegen：github.com/swagger-api…
- recast-generator：github.com/rule78/reca…
- swagger-vue：github.com/chenweiqun/…
- rap：rap2.taobao.org/
