网站搭建及应用教程,北京营销型网站建站公司,长沙关键词优化报价,做网站一年大概的盈利1.引言
开发中#xff0c;我们是否经常遇到以下痛点#xff1a;
项目越大#xff0c;启动和热更新越来越慢#xff0c;启动都要花个3-5分钟以上没有类型#xff0c;接口返回的Object不拿到真实数据都不知道有哪些字段需要手动写很多request函数去调用api#xff0c;手动…1.引言
开发中我们是否经常遇到以下痛点
项目越大启动和热更新越来越慢启动都要花个3-5分钟以上没有类型接口返回的Object不拿到真实数据都不知道有哪些字段需要手动写很多request函数去调用api手动书写各种判断枚举值缺乏代码格式化代码错误检查git commit规范难以维护的css代码和文件js里面书写编写css时没有提示js里面无法使用css高级用法数据流要么太死板对ts支持很差(dva)要么太灵活(mobx)重度依赖redux需要写很多模板文件npm包管理问题比如多版本的npm包冲突、npm包依赖嵌套、npm僵尸包、npm依赖包平铺到nodule_modules首层手动变更接口的loading状态、手动管理modal的visible状态页面经常因为js错误导致白屏体验很差
基于以上痛点菜鸡的我整合了一些开源技术搭了一套脚手架供自己使用并分享给大家学习如果对你有帮助请在github上面给我一个star
2.脚手架核心技术
打包编译 - vite包管理 - pnpm编程语言 - typescript前端框架 - react路由 - react-routerUI组件库 - antdcssinjs(不考虑性能开销) - emotion全局数据共享 - zustand自动生成api - openapi网络请求 - axios数据请求利器 - react-query通用hook(可不用) - ahooks错误边界 - react-error-boundary前端日志(暂未集成) - sentry-javascripthack - babel代码检查 - eslintts代码检查插件 - typescript-eslint代码美化 - prettiergit钩子 - huskycommit格式化 -commitlint
2.自动基于后端swagger文件生成request函数
// src/core/openapi/index.ts// 示例代码
generateService({// openapi地址schemaPath: ${appConfig.baseURL}/${urlPath},// 文件生成目录serversPath: ./src,// 自定义网络请求函数路径requestImportStatement: /// reference types./typings.d.ts /\nimport request from request,// 代码组织命名空间, 例如Apinamespace: Api,
});3.调用接口示例
// HelloGet是一个基于axios的promise请求自动生成
export async function HelloGet(// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)params: Api.HelloGetParams,options?: { [key: string]: any },
) {return requestApi.HelloResp(/gin-demo-server/api/v1/hello, {method: GET,params: {...params,},...(options || {}),});
}// 自动调用接口获取数据
const { data, isLoading } useQuery({queryKey: [hello, name],queryFn: () {return HelloGet({ name: name });},
});// HelloPost是一个基于axios的promise请求自动生成
export async function HelloPost(body: Api.HelloPostParam, options?: { [key: string]: any }) {return requestApi.HelloResp(/gin-demo-server/api/v1/hello, {method: POST,headers: {Content-Type: application/json,},data: body,...(options || {}),});
}// 提交编辑数据
const { mutate, isLoading } useMutation({mutationFn: HelloPost,onSuccess(data) {setName(data?.data || );},onError() {// 清除queryKey为hello的接口数据缓存自动重新获取接口数据queryClient.invalidateQueries({ queryKey: [hello] });}
})mutate({ name: lisi });4.技术说明
UI组件库(ant-design): 开箱即用省心省力。没有选择headless-ui还没有看到成熟的方案(chakra-ui使用成本也很高)封装成本高会一直持续关注通用hook(ahooks): 一个hook工具库没有什么特别的亮点就是hook增强该库可以依据个人喜好选择是否使用路由(react-router-dom): 自身默认支持错误边界功能我觉得react-error-boundary更好用点所以用hack绕过了react-router-dom的错误边界(ps: 暂时不支持参数禁用错误边界)react-router-dom官方没有提供prop禁用默认的错误边界前端日志(sentry): 暂时未集成需要进一步调研实用性和可用性自动生成request函数(openapi): 后端接入apenapi后前端可以根据openapi文件自动生成request api通常使用基于openapi规范的swagger
5.前端架构源码
点此查看前端架构源码
