可能是你遇到最 swagger 前端代码生成工具

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"
  }
}

仓库地址

github.com/yeyan1996/f…

仓库为 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/

这篇好文章是转载于：学新通技术网