前言
随着互联网的快速发展，Web 开发变得越来越重要，也越来越复杂。在大多数 Web 开发中，API 是非常重要的组成部分。作为开发人员，我们需要一种简单而又全面的方式来记录和处理这些 API。为此，Swagger 就应运而生。
Swagger 是一款非常流行的 API 文档工具，它可以用来描述 API、生成可浏览性的文档并进行 API 的测试。Swagger UI 是 Swagger 工具集中的一个子项目，它为开发者提供交互式的 API 文档。
在本文中，我们将介绍如何使用 npm 包 swagger-ui-build 来集成 Swagger UI 到 Web 应用中。
安装 swagger-ui-build
首先，我们需要在项目中安装 swagger-ui-build。可以通过 npm 包管理器来进行安装：
npm install swagger-ui-build
安装完成后，我们就可以在项目中引用 swagger-ui-build 的依赖了。
集成 Swagger UI
接下来，我们将讲述如何使用 swagger-ui-build 在 Web 应用中集成 Swagger UI。
- 首先，我们需要在项目的 index.html 中添加一个 div，用来展示 Swagger UI。
<div id="swagger-ui"></div>
- 然后，在 JavaScript 中添加以下代码来配置 Swagger UI。
-- -------------------- ---- ------- ------ -------------- ---- ------------------- ------ ------------------------------------------- ----- -- - ---------------- ---- ---------------------------------------------- ------- ------------- --- ----------
这里，我们首先导入 swagger-ui-build 包，然后导入 CSS 文件。我们需要传递一个包含 url 和 dom_id 属性的对象来进行配置。url 属性是指向 Swagger API 的 URL，dom_id 属性是指向上面我们新添加的 div 元素的 ID。
最后，我们调用 ui.load() 方法来加载 Swagger UI。
- 最后，我们需要编写启动脚本来启动应用。
这里是一个示例启动脚本：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ -------------- ---- -------------------
------ -------------------------------------------
----- -- - ----------------
---- ----------------------------------------------
------- -------------
---
----------
----- --- - -- -- -
-----
--------- -----------
---- ----------------------
------
--
----------- --- ---------------------------------这个启动脚本中包含了之前的 Swagger UI 配置代码，以及一个简单的 React 应用。
总结
到这里，我们已经成功使用了 npm 包 swagger-ui-build 来集成 Swagger UI 到 Web 应用中。Swagger 提供了非常多的功能，使用起来非常方便。而 swagger-ui-build 则大大减小了我们的集成成本，使得我们可以更快更好地使用 Swagger。
通过本文的学习，希望读者们掌握了如何使用 swagger-ui-build 进行 Swagger UI 的集成，也对如何利用 Swagger 进行 API 文档和测试有了更加深入的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab881e8991b448d852d