由于才发布没多久,加上巨头把握着这种 API 工具,所以就没想到要急着做 CDN 和 NPM 接入
但是各位大佬建议还是先把 CDN 这种简单的方式接入方式加上,所以我趁着琐碎时间就做了这个功能,还配置了工作流,可以自动部署到 linux 服务器,和自动发布 NPM 包,整个项目还是踩了不少坑的
大佬们吐槽的 UI 不怎么美观,吐槽的不可以随后端服务一起发布等等问题,我接下来有闲暇时间会改进 UI 和多主题,也会提供 go-web 框架和 node-web 框架的包接入支持
接入方式请看:这里
拷贝下面的代码到 html 即可以体验,可能访问 CDN 需要翻墙
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>openAPI UI</title>
</head>
<body>
<div id="openapi-ui-container" spec-url="https://petstore3.swagger.io/api/v3/openapi.json"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/openapi-ui.umd.js"></script>
</body>
</html>
欢迎前端 er 和 感兴趣的大佬们提交 issue 和 pr ,最后列一些可能让前端 er 感兴趣的技术点,就是这个项目你能学到什么?
- 如何深入使用 Vite 构建工具,如何利用它打包前端网页、打包 NPM 包
- 如何制定 Vite 的输入输出策略,如何解决从 jsdelivr-CDN 、unpkg-CDN 引入 .cjs 文件失败的问题,如何解决 worker 无法打包注入 bundle 的问题,如何生产环境清除前端日志
- 如何利用 Vite 支持复杂的项目环境,例如:支持 Nodejs 、Commonjs 包的使用
- 如何分析项目构建产物,降低压缩体积,例如:manaco-editor 的打包优化
- 如何利用 Docker 做前端项目容器化部署,如何利用 Docker 动态往前端项目注入环境变量
- 如何利用 Github-Action 自动化构建多架构 Docker 镜像,并自动化部署 Docker 镜像到远程服务器(有坑,还未完全解决)
- 如何利用 Github-Action 自动化发布一个 NPM 包,发布不同模块规范的 NPM 包的细节区别以及打包姿势
- 如何利用 Github-Action 制作有依赖关系的 workflow
- 如何测试 es 、umd 、cjs 包的正确性
- 如何做低代码项目,如何使用闭包结合配置根据表单配置动态生成表单,如何利用 antd-form 应对复杂 form 需求,关于表单组件的一些思考
- 如何使用 Vercel, linux 服务器 部署前端项目,如何利用 nginx 反向代理做域名映射
- 如何利用 swagger/openapi 自动生成 ts 定义、axios 请求、枚举、英译汉等等
- 如何做 ii8n 国际化、多主题支持
- 引入了 manaco-editor 和 faker.js 包,导致项目体积偏大,该如何处理