代码之家 › 专栏 › 技术社区 › Dirk

如何使用现有的OpenAPI规范文件使用SiggueUI NPM模块

openapi swagger-ui swagger npm node.js

Dirk · 技术社区 · 6 年前

看着 the documentation for installing Swagger-UI 可以看到两个官员 npm 正在发布模块: swagger-ui 和 swagger-ui-dist 是的。然而,我真的很难弄清楚这些应该如何与已经存在的东西一起使用。 OpenApi 3.0 规范。

我只需要一个简单的web应用程序(简单的 node.js 或 express.js 无论什么工作,都将为我服务。 specification.yml 文档嵌入到简单的招摇过市的ui文件中,路径如下 /docs 是的。

由于这需要以可重复的方式完成(最终将在Docker容器中运行),因此在此过程中不需要手动编辑文件。

我能得到的最接近的是下载 a release tar ball ,提取 dist 文件夹,使用诸如 sed 将默认规范文件替换为我自己的规范文件,并最终在类似于 nginx 是的。

然而,这对我来说是不必要的复杂,让我想知道 NPM 模块应该用于。

2 回复 | 直到 6 年前

Dirk 6 年前

最后,我找到了两种方法来实现我的目标。

使用UNPKG

unpkg 是自动化的 content delivery network 对于在上发布的所有模块 npm 登记处。它允许包括和使用 NPM 一个静态HTML文件中的模块,没有任何复杂的包管理器、依赖解析程序等。如果您不需要使用 NPM 直接影响生态系统。

为了 swagger-ui ,这样的html文件将如下所示。请注意,我们正在导入 swagger-ui-dist 已包含所有必需依赖项的包。

<!DOCTYPE html>
<!--Inspired by https://gist.github.com/buzztaiki/e243ccc3203f96777e2e8141d4993664-->
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Swagger UI</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist@3/swagger-ui.css" >
  </head>

  <body>
    <div id="swagger-ui"></div>
    <script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"> </script>
    <script type="text/javascript">
      window.onload = function() {
        // Swagger-ui configuration goes here.
        // See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
        SwaggerUIBundle({
          deepLinking: true,
          dom_id: '#swagger-ui',
          showExtensions: true,
          showCommonExtensions: true,
          url: specification.json // <-- adjust this to your webserver's structure
        });
      };
    </script>
  </body>
</html>

把这个html文件放在你的web服务器上,你的一切都解决了。

使用browserify/webpack

browserify 和 webpack 是来自 NPM 能够收集 NPM 模块及其所有依赖项,然后将它们捆绑在一个 js 文件。然后可以在html页面中加载和使用此文件。

虽然这两种工具在细节上可能会有所不同,但对于这项工作,它们的工作方式几乎相同。下面的示例使用 browserify 但是,一般的方法是 webpack 是一样的。

首先,安装 浏览 全球地:

npm install -g browserify

然后,安装 招摇的用户界面 当前文件夹中的本地模块:

npm install --save swagger-ui

最后,捆绑 招摇的用户界面 将模块及其所有依赖项放入单个输出文件中:

browserify --require swagger-ui -o bundle.js

包含它的相应HTML页面可能如下所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./node_modules/swagger-ui/dist/swagger-ui.css">
        <title>Swagger-UI</title>
    </head>
    <body>
        <div id="swagger-ui"></div>
    </body>
    <script type="text/javascript" src="./bundle.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        // Swagger-ui configuration goes here.
        // See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
        SwaggerUI({
          deepLinking: true,
          dom_id: '#swagger-ui',
          showExtensions: true,
          showCommonExtensions: true,
          url: specification.json // <-- adjust this to your webserver's structure
        });
      };
    </script>
</html>

如果您使用 浏览 或 网页包 在你的生态系统中完成其他任务。

Helder Sepulveda 6 年前

如果您正在寻找任何工作,最简单的解决方案是使用现有的Savige UI,如演示存储,并将您的规格在URL PARAM:
http://petstore.swagger.io/?url=https://raw.githack.com/heldersepu/hs-scripts/master/swagger/4411/7.json

如果需要更多的独立解决方案,请将swagger ui dist目录复制到部署中:
https://github.com/swagger-api/swagger-ui/tree/master/dist
然后调整index.html以满足您的需要