简介
redoculous 是一个 npm 包，用于在前端应用中生成文档。它可以根据已有的 OpenAPI 或 Swagger 规范生成文档，并支持多种定制化配置。
安装
首先，在终端命令行中使用 npm 命令安装 redoculous：
npm install redoculous --save
安装完成后，我们就可以在前端应用中引用它了。
使用
基本用法
在前端应用中使用 redoculous 可以分成两个步骤：
- 导入 npm 包
- 调用 redoculous 并渲染生成的文档
import Redoc from 'redoculous' import 'redoculous/es/style.css' Redoc.init(specUrl, '#redoc-container');
以上代码中，
Redoc是从 redoculous 包中导入的，用于调用 redoculous 的接口specUrl指定了需要根据 OpenAPI 或 Swagger 规范生成文档的规范 URL#redoc-container是一个 DOM 元素的选择器，指定了文档渲染的容器
如果没有指定 specUrl，那么 redoculous 会自动查找浏览器当前页面加载的 OpenAPI 规范 URL。
定制化配置
如果需要根据自己的需求定制化文档生成的样式或者内容，可以配置一些 props：
Redoc.initAsync({
spec: await fetch(specUrl).then(res => res.json()),
scrollYOffset: 50,
hideHostname: false,
nativeScrollbars: true,
suppressWarnings: true
})以上代码中，
initAsync方法是异步调用接口，它接受一个包含自定义配置的对象spec属性指定了需要渲染的规范对象scrollYOffset属性指定文档滚动时的偏移量hideHostname属性可以设置为 true，这样在生成的文档中就不会显示主机名nativeScrollbars属性可以设置为 true，这样就可以使用浏览器的原生滚动条suppressWarnings属性可以设置为 true，这样 redoculous 在生成文档时就不会显示警告信息了
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ------------
----- ---------------- -------------------------------------------------------
-------
------
---- ---------------------------
------- ------------------------------
------ ----- ---- ------------
----- ------- - --------------------------------------------
-----------------
----- ----- ----------------------- -- ------------
-------------- ---
------------- ------
----------------- -----
----------------- ----
-- --------------------------------------------
---------
-------
-------通过这个示例代码，我们就可以在浏览器中看到在 #redoc-container 中根据 specUrl 自动生成的文档了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbf81e8991b448da551