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 🙏

© 2026 – Pkg Stats / Ryan Hefner

mfe-swagger

v1.1.3

Published

将[Swagger-UI](https://swagger.io/swagger-ui/)和[Expressjs](https://expressjs.com)包装的[swagger-ui-express](https://www.npmjs.com/package/swagger-ui-express) 再次进行包装,灵活得满足三种形式来构建文档。

Readme

简介

Swagger-UIExpressjs包装的swagger-ui-express 再次进行包装,灵活得满足三种形式来构建文档。

  1. 将书写的swagger配置文件,主要是yamljson格式的配置生成API文档
  2. 满足swagger需要的JSDoc的代码注释生成API文档
  3. JSDoc注释生成swagger配置文件并将文件代理出去,用于其他swaggerhub来呈现API文档

API文档

fromMeta(dir) -> middleware

// Swagger元文件所在的文件夹
const swaggerDir = path.join(__dirname, '../swagger')

// /swagger可以自定义
app.use('/swagger', swagger.fromMeta(swaggerDir))

该方法用于将swagger配置生成API文档并提供访问能力,需要保证dir参数传入的路径存在swagger配置文件,否则会抛异常

执行npm run example 之后通过 http://localhost:3000/swagger/index.yaml 可以访问到文档。

fromJsDoc(options, uri = '/swagger/from-jsdoc.json') -> middleware

var options = {
  swaggerDefinition: {
    info: {
      title: '活动系统',
      version: '1.0.0',
      description: '活动系统',
    },
    host: '127.0.0.1',
    basePath: '/v2',
  },
  apis: [path.join(__dirname, './routers/*.js')], // Path to the API docs
}

// 访问方式 http://localhost:3000/swagger/from-jsdoc.json
app.use(swagger.fromJsDoc(options))

// 访问方式 http://localhost:3000/swagger/docs
// app.use('/swagger', swagger.fromJsDoc(options, '/docs'))

该方法用于将满足swagger形式的JSDoc代码注释,生成API文档并提供访问能力。

执行npm run example 后通过 http://localhost:3000/swagger/from-jsdoc.json 可以访问到预定于的文档

generatorMetaFromJsDoc(options, fileName, swaggerDir) -> void

利用 swagger-jsdocjsdoc 注释生成Swagger所需要的配置文件。

源码

const generatorMetaFromJsDoc = (options, fileName, swaggerDir) => {
  if (!fileName || !options || !swaggerDir) {
    throw new Error(`Params error.`)
  }

  try {
    const exists = fs.existsSync(swaggerDir)
    if (!exists) {
      mkdirp.sync(swaggerDir)
    }
    const destFileName = path.join(swaggerDir, fileName)
    const swaggerSpec = swaggerJSDoc(options)
    fs.writeFileSync(destFileName, JSON.stringify(swaggerSpec, null, 2))
  } catch (err) {
    throw err
  }
}

使用

var options = {
  swaggerDefinition: {
    info: {
      title: '活动系统',
      version: '1.0.0',
      description: '活动系统',
    },
    host: '127.0.0.1',
    basePath: '/v2',
  },
  apis: [path.join(__dirname, './routers/*.js')], // Path to the API docs
}
const swaggerDir = path.join(__dirname, '../swagger')
swagger.generatorMetaFromJsDoc(options, 'from-jsdoc.json', swaggerDir)

生成的文件是JSON格式,如果需要生成YAML格式需要再做处理。

proxyMeta(dir) -> express.static(dir)

用于在项目中代理所有的Swagger的Meta数据,其实就是个静态服务,该方法可有可无

使用方式

const swaggerDir = path.join(__dirname, '../swagger')
app.use(swagger.proxyMeta(swaggerDir))

效果跟app.use(express.static(swaggerDir))是一样的

generatorMetaFromJsDocAndProxy(options, fileName, swaggerDir) -> express.static(dir)

该方法是generatorMetaFromJsDoc()proxyMeta()的叠加效果

var options = {
  swaggerDefinition: {
    info: {
      title: '活动系统',
      version: '1.0.0',
      description: '活动系统',
    },
    host: '127.0.0.1',
    basePath: '/v2',
  },
  apis: [path.join(__dirname, './routers/*.js')], // Path to the API docs
}
const swaggerDir = path.join(__dirname, '../swagger')
app.use('/swaggerss', swagger.generatorMetaFromJsDocAndProxy(options, 'from-jsdoc.json', swaggerDir))

执行 npm run example 后通过 http://localhost:3000/swaggerss/from-jsdoc.json 访问JSDOC生成的JSON文档

示例说明

yarn && npm run example

启动项目后就可以通过上边的链接看到文档或者对应的JSON配置文件。

其他说明

  1. 注意文档只配置到非生产环境,生产环境不要部署文档。

依赖库

  1. express
  2. swagger-jsdoc
  3. swagger-ui-express
  4. yamljs

发版说明

1.1.3

  1. 移除不必要的console
  2. 增加@types/node,修复build报错。

1.1.2

  1. generatorMetaFromJsDoc(options, fileName, swaggerDir) 增加自动创建文件夹。
  2. fromMeta(dir) 增加文件夹验证。

1.1.1

  1. 升级swagger-ui-express2.0.8

1.1.0

  1. 隐藏头部导航
  2. 增加站点favorite、title的自定义
  3. 更改example

1.0.0

  1. 基本功能实现