SwaggerUIBundle 和 SwaggerUi 有什么区别

Question

我在我找到的样本中都看到了，但没有看到它们有何不同。如果您仅在 HTML 页面（不使用单页应用程序）中使用它，是否需要该包，或者如果您使用单页应用程序，是否需要使用该包？

Swagger UI docs 讨论部署 swagger 的两种方法-ui。

traditional npm - 招摇-ui
dependency-free module - swagger-ui-dist

我看过示例 like this one，其中 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",

但也看到 examples like this 一个使用 SwaggerUi 的。

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

搜索 returns 类似的东西：

招摇-ui-bundle.js - https://github.com/swagger-api/swagger-ui/issues/3978
SwaggerUi -
SwaggerUIBundle - https://github.com/swagger-api/swagger-ui/wiki/FAQ

Answer 1

带const ui = SwaggerUIBundle(...的第一个例子是SwaggerUI3.x，这是Swagger的当前版本UI .

带有 window.swaggerUi = new SwaggerUi(... 的第二个示例用于旧的 Swagger UI 2.x.

3.x 和 2.x 的区别见 here。

Answer 2

此页面 Installation Distribution Channels NPM Registry 说：

SwaggerUIBundle is equivalent to SwaggerUI.

然后解释差异。所以它们在功能上是 equivalent 但你选择哪一个将取决于你的 webserver/website 如何服务于 swagger 用户界面页面.

带有 const ui = SwaggerUIBundle(... 的第一个示例是针对 Swagger UI 3.x 的，这是 Swagger UI 的当前版本。 window.swaggerUi = new SwaggerUi(... 的第二个示例用于旧的 Swagger UI 2.x。 信用 @Helen for this info in 答案)

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

招摇UI解释

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

网页是这样说的：

import SwaggerUI from 'swagger-ui'

swagger-ui is meant for consumption by JavaScript web projects that include module bundlers, such as Webpack, Browserify, and Rollup.

下面是使用 npm 安装模块的示例 swagger-ui。

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

SwaggerUIBundle 解释

SwaggerUI当您的应用不支持导入 npm 模块（例如 java webapp）时使用 Bundle。

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

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

The [...] dist folder [has] swagger-ui-bundle.js, which is a build of Swagger-UI that includes all the code it needs to run in one file. The folder also has an index.html asset, to make it easy to serve 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 示例令人困惑

令人困惑，因为它说：

if you're in a JavaScript project that can't handle a traditional npm module, you could do something like this:

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

它使用 require()，它 是一个 npm 模块 包含包的方式。

一个不那么令人困惑的解释方式是：

如果您在非模块环境中使用 Swagger，那么您需要以某种方式将 swagger bundle javascript 加载到浏览器页面中，然后使用 SwaggerUIBundle，如下所示使 swagger 用户界面在指定的 dom_id 处呈现（在下面的示例中是 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>. 加载页面，请参阅 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

如何将 swagger bundle javscript 放到页面上取决于您。

SwaggerUIBundle 和 SwaggerUi 有什么区别

What is the difference between SwaggerUIBundle, and SwaggerUi

swagger-ui

招摇UI解释

SwaggerUIBundle 解释

SwaggerUIBundle 示例令人困惑