Dir*_*irk 4 node.js npm swagger swagger-ui openapi
查看安装 Swagger-UI 的文档可以看到npm正在发布两个官方模块：swagger-ui和swagger-ui-dist。然而，我真的很难弄清楚如何将它们与现有的OpenApi 3.0规范一起使用。
我唯一需要的是一个简单的 Web 应用程序（普通node.js的express.js或任何有效的），它将为specification.yml嵌入到普通 Swagger-UI 文件中的现有文档提供服务，路径如/docs.
由于这需要以可重复的方式完成（最终将在 Docker 容器中运行），因此在此过程中不需要手动编辑文件。
我能得到的最接近的是下载一个发布 tar 球，提取dist文件夹，使用诸如sed用我自己的文件替换默认规范文件之类的工具，最后将其托管在像nginx.
然而，这对我来说看起来不必要的复杂，让我想知道这些npm模块应该用来做什么。
最后，我找到了两种方法来实现问题中概述的目标。
unpkg是一个自动内容交付网络，适用于在注册表上发布的所有模块npm。它允许在静态 HTML 文件中包含和使用任何npm模块，而无需任何复杂的包管理器、依赖解析器等。如果您没有任何其他需要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 文件托管在您的网络服务器上，一切就都解决了。
browserify和webpack是来自npm生态系统的模块捆绑器，可以收集npm模块及其所有依赖项，然后将它们捆绑在一个js文件中。然后可以加载该文件并在 HTML 页面中使用。
虽然这两种工具在细节方面可能有所不同，但对于这项工作，它们的工作方式几乎相同。以下示例使用browserify，但是，一般方法webpack是相同的。
首先，browserify全局安装：
npm install -g browserify
然后，swagger-ui在当前文件夹中本地安装该模块：
npm install --save swagger-ui
最后，将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>
如果您正在使用browserify或webpack在您的生态系统中执行其他任务，则此方法可能是首选。
| 归档时间： |
|
| 查看次数： |
6440 次 |
| 最近记录： |