最后,我找到了两种方法来实现我的目标。
使用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>
如果您使用
浏览
或
网页包
在你的生态系统中完成其他任务。
