Question

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

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

traditional npm-swagger-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",

搜索返回的内容如下：

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

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

第二个使用window.swaggerUi = new SwaggerUi(...的示例适用于旧版 Swagger UI 2.x 。

有关3.x和2.x之间的区别，请参见here。

Answer 2

此页面Installation Distribution Channels NPM Registry说：

SwaggerUIBundle等同于SwaggerUI。

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

SwaggerUI解释了

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

网页上说：

import SwaggerUI from 'swagger-ui'

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

下面是使用npm内置模块swagger-ui的示例。

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

SwaggerUIBundle解释了

SwaggerUIBundle在您的应用程序不支持导入npm模块（例如Java webapp）时使用。

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

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

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包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>.加载页面，请参见https://github.com/swagger-api/swagger-ui/blob/master/dist/index.html（在swagger-ui / dist / index.html中）。

如果您使用的是NodeJS Express应用程序，则可以使用以下方法将招摇工具包加载到页面上：

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

如何根据您的需要将招摇的束缚式脚本放到页面上。

SwaggerUIBundle和SwaggerUi

2 个答案:

SwaggerUI解释了

SwaggerUIBundle解释了

SwaggerUIBundle示例令人困惑