分享一个根据 swagger 自动生成 ts 代码的小工具

[ppddtt]

https://github.com/zt8989/sisyphus-cli

sisyphus-cli(西西弗斯)

一个从 swagger 自动生成 ts 代码的工具

如何使用

安装 cli

npm install sisyhpus-cli -g

如何增加新的项目

1. 新建文件夹如xxx-api
2. sisyhpus init xxx-api初始化
3. 查看如何更新代码

如何更新代码

1. 进入相应文件夹如xxx-api
2. 查看sisyhpus.json文件 file 路径是否执行对应 swagger 的地址
3. 执行sisyhpus更新代码
4. 执行npm run build打包
5. 将 dist 的 js 和 d.ts 复制到项目或者使用npm publish发布

原理

sisyhpus-cli会根据 swagger.json 生成类似代码

class Api {
  constructor(request){
    this.request = request
  }

  function getDetail(pathParams, queryParams, bodyParams){
    return this.request({
      url: bindUrl('/detail', pathParams),
      method: 'GET',
      params: queryParams,
      data: bodyParams
    })
  }
}

如何引入

import Api from 'xxx-api';

编写适配器

由于生成的代码是按照 axios 的格式组织参数，所以针对不同的请求库，要做一层封装。 以fetch为例

function adapter(requestInstance) {
  /**
   *
   * @param {AjaxOptions} options
   */
  return options => {
    const baseUrl = '/api';
    let { url } = options;
    const { params, data, ...restParams } = options;
    url = baseUrl + url;
    if (params) {
      url = `${url}?${stringify(params)}`;
    }
    return requestInstance(url, { ...restParams, body: data });
  };
}

const api = new Api(adapter(request));

api.login({ useraname: xxx, password: xxx }).then(res => {})

QA

Q: 我遇到了中文的 model 怎么办？

A: 修改 java 中的注解，@ApiModel("xxx") => @ApiModel(description = "xxx")

TODO

• [x] 生成 model 代码
• [x] 生成 api 代码
• [x] 优化注释
• [x] 自动打包发布到 npm，包含可以提示的 d.ts
• [ ] 自动生成浏览器可以用的 js
• [ ] 考虑泛型的优化