npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

create-sw-api

v1.0.72

Published

Automatically generate request api from swagger doc

Downloads

13

Readme

create-sw-api

🙋‍♂️why?

  1. 你是否曾经遇到过swagger文档上有上百个接口,然后你要每一个自己手写出来, 效率和正确率大幅下降。 现在你只需要工具一键生成所有的axios接口~
  2. typescript的项目里axios的返回数据通常都难以定义,但是现在工具能够帮你完整生成类型推导

image.png image.png

✨ Features

  • 只需要一个配置文件,方便项目迁移
  • 模板支持,接口风格自由定义
  • 注释生成, 容易辨识
  • 生成typescript的类型推导

📦 Install

npm install create-sw-api -D

🖥  Command

Usage: sw-api [options]

Options:
  -c, --config  Please enter the path of <sw.config.js>
  -h, --help    display help for command

🔨 Usage

  1. 下载完成后,我们需要在项目的根目录建立一个配置文件,默认名称叫 **sw.config.js **的配置文件,执行命令sw-api能够自动执行该文件, 当然你也可以自由命名 sw-api --config xxx。

  2. 配置文件编写

// 定义模板
let tpl = ` export const {{apiname}} = ({{params}}) => request('{{url}}', {{{query}}}, {
  method: '{{method}}',
  body: {{body}},
});
`

module.exports = {
    // entry 是swagger的一个叫api-doc的接口,可以从浏览器的网络面板中查看
    entry:"http://xxxxxx/api-docs",
    template:tpl, // 渲染的模板
    header:`import request from  '../../request'`, // 该文件需要引入的模块
    typescript: true, // 是否支持ts
}
  1. ** **配置package.json里面script的字段 比如:  
"scripts": {
    "api":"sw-api " // or  "api": "sw-api --config xxx.js" 执行指定对应配置文件
  },
  1. 直接输入 npm run api 即可

template模板变量名称

使用的是与vue类似的模板语法的来定义

| 模板变量名 | 含义 | | ---------- | ------------------------------------------------------------ | | apiname | 最后生成的api名称 | | params | 解构出来的参数对象 | | method | 方法名称比如get,post等 | | url | url | | query | get的query参数放在对象里面 | | body | 如果该方法没有body参数则渲染一个空对象 (暂时没想到一个好方案) |

📝Advanced usage

module.exports = {
    // entry 是swagger的一个叫api-doc的接口,可以从浏览器的网络面板中查看
    entry:"http://icity-dev.cloud.cityworks.cn/api/sheshijianguan/v2/api-docs",
    template:tpl, // 渲染的模板
 
    header:`import request from  '../../request'`, // 每个文件中引入的模块
    typescript: true, // 是否支持ts
    output:{
      path:('./apitest')
    },
    filterName:{
      1:'map',
      2:'Controller',
      3:'Check'
    },
    isAxiosTypes:false, 
}

| 参数名称 | 类型 | 含义 | | ------------ | ------- | ---------------------------------------------------------- | | entry | stirng | swagger的一个叫api-doc的接口,可以从浏览器的网络面板中查看 | | template | string | 模板字符串 | | header | string | string 渲染模板的头部 | | footer | string | string  渲染模板的尾部 | | typescript | boolean | 是否支持ts | | filterName | object | 对应名称的映射 | | isAxiosTypes | boolean | typescript 模式下 是否支持直接返回axios类型 |

😘Q&A

1. 默认渲染的文件名称太长了有什么方法呢?

请参考高级用法的 filterName 参数,默认是按照swagger的顺序映射的,key为swagger对应的类别的索引,value为映射名称。