SwaggerUIBundle和SwaggerUi有什么区别

Question

我已经在找到的样本中看到过，也没有看到它们之间的不同。如果仅在HTML页面（不使用单页应用程序）中使用此包，则需要捆绑软件吗？如果使用单页应用程序，则需要使用该捆绑包吗？

该扬鞭UI文档讨论两种部署招摇的UI。

• 传统的npm -swagger-ui

• 无依赖模块 -swagger-ui-dist

我见过的例子是这样一个地方SwaggerUIBundle上似乎是在Tomcat中（Python或一些其他的web服务器）例如托管的网页中。

<script src="./swagger-ui-bundle.js"> </script>
// later
<script>
window.onload = function() {
  // Build a system
  const ui = SwaggerUIBundle({
    url: "https://petstore.swagger.io/v2/swagger.json",

但是也看到了使用SwaggerUi 这样的示例。

window.swaggerUi = new SwaggerUi({
  url: "http://petstore.swagger.wordnik.com/api/api-docs",
  dom_id: "swagger-ui-container",

搜索将返回如下内容：

• swagger-ui-bundle.js- https://github.com/swagger-api/swagger-ui/issues/3978

• SwaggerUi- https: //stackoverflow.com/a/29497301/3281336

• SwaggerUIBundle- https://github.com/swagger-api/swagger-ui/wiki/FAQ

Answer 1

此页面安装分发渠道NPM注册表说：

SwaggerUIBundle等效于SwaggerUI。

但是，然后解释了差异。因此，它们在功能上是等效的，但您选择的方式将取决于您的Web服务器/网站如何提供全面的用户界面页面。

第一个示例const ui = SwaggerUIBundle(...是Swagger UI 3.x的，这是Swagger UI的当前版本。第二个示例window.swaggerUi = new SwaggerUi(...用于旧的Swagger UI2.x。信用@Helen对该信息这个答案）

有关更多详细信息，请阅读...

SwaggerUI解释

SwaggerUI用于可以导入npm模块的应用程序中。 这包括React，Angular或其他单页面应用（SPA），其中包括类似于webpack的工具，用于打包资源以将其交付给浏览器。

该网页上说：

import SwaggerUI from 'swagger-ui'

swagger-ui是供JavaScript Web项目使用的，JavaScript Web项目包括模块捆绑器，例如Webpack，Browserify和Rollup。

这是使用npm intalled模块的示例swagger-ui。

import SwaggerUI from 'swagger-ui'
// or use require, if you prefer
const SwaggerUI = require('swagger-ui')
SwaggerUI({
  dom_id: '#myDomId'
})

SwaggerUIBundle解释

当您的应用程序不支持导入npm模块（例如，java webapp）时，将使用SwaggerUIBundle。

可以通过使用swagger index.html页面（包含在swagger-ui-bundle中）或您自己的个人html页面（包括捆绑文件并使用以下Javascript）来加载swagger用户界面：

以下内容来自网站，并经过编辑以突出我的上述声明：

dist文件夹[s]具有swagger-ui-bundle.js，它是Swagger-UI的内部版本，其中包含在一个文件中运行所需的所有代码。该文件夹还具有index.html资产，可以轻松提供Swagger-UI ...

如何使用SwaggerUIBundle的示例是：

var SwaggerUIBundle = require('swagger-ui-dist').SwaggerUIBundle
const ui = SwaggerUIBundle({
    url: "https://petstore.swagger.io/v2/swagger.json",
    dom_id: '#swagger-ui',
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIBundle.SwaggerUIStandalonePreset
    ],
    layout: "StandaloneLayout"
  })

SwaggerUIBundle示例令人困惑

这令人困惑，因为它说：

如果您处于无法处理传统npm模块的JavaScript项目中，则可以执行以下操作：

var SwaggerUIBundle = require('swagger-ui-dist').SwaggerUIBundle

它使用require（），这是包含包的npm模块方式。

对此进行解释的一种不太混乱的方法是：

如果您在非模块环境中使用Swagger，则需要以某种方式将swagger bundle javascript加载到浏览器页面中，然后使用SwaggerUIBundle如下所示，以在指定的dom_id下渲染swagger用户界面（在以下示例中）是swagger-ui）。

const ui = SwaggerUIBundle({
    url: "https://petstore.swagger.io/v2/swagger.json",
    dom_id: '#swagger-ui',
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIBundle.SwaggerUIStandalonePreset
    ],
    layout: "StandaloneLayout"
  })

将swagger-ui-bundle加载到页面上的方式取决于所使用的技术。如果需要，可以使用<script src="bundle.js"></script>. See https://github.com/swagger-api/swagger-ui/blob/master/dist/index.html（位于swagger-ui / dist / index.html中）加载页面。。

如果您在NodeJS Express应用程序中，则可以使用以下方法将swagger捆绑包加载到页面上：

var SwaggerUIBundle = require('swagger-ui-dist').SwaggerUIBundle

您如何将招摇式捆绑包脚本下载到页面上取决于您。

Answer 2

第一个示例const ui = SwaggerUIBundle(...用于Swagger UI 3.x，它是 Swagger UI 的当前版本。

第二个例子window.swaggerUi = new SwaggerUi(...是旧的Swagger UI 2.x。

请参阅此处了解 3.x 和 2.x 之间的差异。