吃透这个前端项目: openapi-ui(开发打包部署从0到1)，不能从前端萌新变身前端老司机，提刀来砍我，不信你进来瞅一眼

故城_lane
389 阅读5分钟

1. 功能截图展示

15.jpg 9.jpg 7.jpg

2. 引言

  • 其实就是个标题党文章，大家真别砍我了，我上有老下有小的😭😭😭，由于技术内容太多，这篇文章只是吊下胃口，接下来有时间我会分篇幅发布文章讲解，你们可以留言一些感兴趣的细节，我可以把我踩坑的路程用文章写出来和大家分享，当然你自己看代码吃是最好的，有问题都可以 issue 留言或者提 PR
  • 其实以前发过这个项目的介绍文章了，但是最近我把它做成了 NPM 包，准备提供包让 go 和 node 的一些 web 框架接入，所以我写了这篇文章宣传，希望想学习前端技术的人和对这个项目感兴趣的人一起参与贡献
  • 由于本人已29岁，加上平时还要带娃，用于耕耘技术的时间少，技术变现更不现实，在成都这座城市越来越感觉到 IT 职业生涯的终点近在咫尺，所以想写点啥记录一下人生的 IT 生涯旅程，挤时间学习了 nestjs、golang、基于docker + docker-compose的后端服务部署，但是在公司并没有什么机会用上😭😭😭
  • github地址是：github.com/rookie-luoc…，国产开源不易，github求 star、fork 支持一下，欢迎熟悉 swagger 和 openapi 规范的小伙伴来把这个项目建设好🙏🙏🙏
  • npm包地址是：openapi-ui-dist

3. 这是个什么项目

  • swagger、openapi是一种流行的 Api 规范，但是由于市面上基于该规范生成的文档测试工具很难用（swagger-ui就不必说了，redocly无法测试接口，不对标 apifox 这些不能引入后端框架的网站），所以我写了该项目，你可以通过在线网站直接使用，也可以通过 CDN、NPM、Docker镜像 的方式使用
  • 由于长期使用 swaggerUI 工具，它的轻量风格个人觉得还是不错的，但是它的整体使用体验确实不好，用过的可能都有体会，这里就不一一列举了（由于语言表达能力有限，手动🐶保命，毕竟我在说鼻祖，等下会不会被砍😭）
  • 国产开源不易，github求 star、fork 支持一下，欢迎熟悉 swagger 和 openapi 规范的小伙伴来把这个项目建设好

4. 这个项目你能学到什么

  • 如何深入使用 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 包，导致项目体积偏大，该如何处理

5. 如何使用

5.1. openapiUI网站域名

5.2.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/openapi-ui-dist@2.0.0/lib/openapi-ui.umd.js"></script>
  </body>
</html>

5.3.React接入(或者 Vue接入)

import { useEffect } from "react";

const SetUpOpenApiUI = () => {
  useEffect(() => {
    import("openapi-ui-dist")
  }, []);

  return (
    <div id="openapi-ui-container" spec-url="https://petstore3.swagger.io/api/v3/openapi.json" />
  );
}

6.项目技术栈

  • 因为项目功能不是特别复杂，也不需要考虑兼容性，所以项目的技术栈非常新颖，追着版本跑的那种，如同有需要你可以学习下项目的技术架构
  • 项目主要技术栈为：vite5 + react18 + typescript5 + react-router6 + antd5 + zustand4 + emotion(cssinjs) + docker + docker容器化部署 + docker环境变量注入
  • 项目工程化配置为：eslint + typescript-eslint + husky + lint-staged + prettier + commitlint
  • 如果你做业务开发的话，推荐增加openapi2typescript，可以自动生成axios请求和接口的ts定义
  • 如果你做业务开发的话，推荐增加react-query，可以自动实现自动loading和接口联动
  • 具体如何结合使用可以参考我搭建的前端开发脚手架，目前支持react18模板、vue3模板，我们可以一起完善模板的技术栈和UI Layout结构

7.未来的展望

  • 由于刚开发出来，还没有怎么使用，需要不断修复bug，欢迎大家尝试使用并提出bug
  • 支持一套暗黑主题，优化 UI 和使用体验
  • 精细化的支持openapi3.0.x和3.1.x
  • 优化和开发 issue 上的TODO
avatar
文章
阅读
粉丝