Вы можете использовать Swagger UI npm package , который публикует пакет JavaScript, который можно использовать с документом спецификации.
Возможно, вам придется выполнить некоторые незначительные манипуляции, загрузив спецификациюфайл в объект пользовательского интерфейса.
Редактировать
Я нашел код для того, когда я сделал что-то точно так же.Я создал файл JavaScript, который загружал бы спецификацию с сервера и отображал ее с пакетом SwaggerUI, заменяя указанный HTML-тег.При этом также использовалась библиотека для анализа YAML в JSON.
Я использовал веб-пакет для объединения всего, но вы могли потенциально использовать другой веб-упаковщик.
JavaScript: index.js
const jsYAML = require('js-yaml');
const SwaggerUI = require('swagger-ui');
function httpGetAsync(url, callback) {
let xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200)
callback(xmlHttp.responseText);
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function parseYamlSpec(yaml) {
try {
return jsYAML.safeLoad(yaml);
} catch (error) {
console.error('Error parsing OpenAPI YAML to JavaScript object');
console.error(error);
return null;
}
}
function displayOpenApiSpec() {
httpGetAsync('./openapi.yaml', function (yamlSpec) {
SwaggerUI({
dom_id: '#openapi',
spec: parseYamlSpec(yamlSpec)
})
});
}
displayOpenApiSpec();
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger Doc</title>
<link rel="stylesheet" type="text/css" href="swagger-ui.css"/>
</head>
<body>
<div id="openapi"></div>
<script src="bundle.js"></script>
</body>
</html>
Я также взял CSS-файл из пакета SwaggerUI и тоже его обслуживал.Это необходимо, чтобы он выглядел красиво и функционально.
Редактировать 2
package.json
{
"name": "sdk",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"js-yaml": "^3.12.0",
"swagger-ui": "^3.20.2"
},
"devDependencies": {
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname),
filename: 'bundle.js'
}
};
Учитывая, что у вас установлены Node.js и npm, вы можете использовать указанные выше файлы package.json и webpack.config.js и запустить следующие двакоманды из рабочего каталога:
npm install
npm build
Что это делает
По сути, вы хотите предоставить файл HTML, пакет JavaScript и таблицу стилей CSS, которые будут работать для загрузки вашего SwaggerСпецификация в DOM, стилизовать его и использовать библиотеку SwaggerUI, чтобы сделать его интерактивным.
С данным файлом JavaScript это не будет работать в браузере, поскольку он использует Node.js стиль require для импортадве необходимые библиотеки.Но веб-пакет сможет заменить их действующими библиотеками JavaScript и «минимизировать» код, чтобы он уменьшился в размере.
Для этого вам необходимо установить все эти библиотеки.(используя npm, Node Package Manager), а также веб-пакет (вместе с его интерфейсом командной строки), а затем запустите веб-пакет, чтобы он собрал все для вас.
Файл package.jsonперечисляет все эти необходимые библиотеки плюс webpack и определяет «скрипт» для запуска команды webpack.Запустив npm install, npm установит все для вас в локальную папку с именем node_modules.
Затем, запустив npm build, Node.js выполнит команду webpack, которая выполнит всесвязывание и создание выходного файла bundle.js (на который есть ссылка в HTML-файле выше).
Как только все это будет сделано, вы можете добавить index.html, bundle.js, swagger-ui.css (который яскопировано из каталога SwaggerUI в node_modules) и ваша спецификация Swagger в ваши общедоступные файлы на вашем сервере.