1.引言

開發(fā)中，我們是否經(jīng)常遇到以下痛點：

• 項目越大，啟動和熱更新越來越慢，啟動都要花個3-5分鐘以上
• 沒有類型，接口返回的Object不拿到真實數(shù)據(jù)都不知道有哪些字段
• 需要手動寫很多request函數(shù)去調(diào)用api，手動書寫各種判斷枚舉值
• 缺乏代碼格式化，代碼錯誤檢查，git commit規(guī)范
• 難以維護的css代碼和文件，js里面書寫編寫css時沒有提示，js里面無法使用css高級用法
• 數(shù)據(jù)流要么太死板，對ts支持很差(dva)，要么太靈活(mobx)
• 重度依賴redux，需要寫很多模板文件
• npm包管理問題，比如：多版本的npm包沖突、npm包依賴嵌套、npm僵尸包、npm依賴包平鋪到nodule_modules首層
• 手動變更接口的loading狀態(tài)、手動管理modal的visible狀態(tài)
• 頁面經(jīng)常因為js錯誤導(dǎo)致白屏，體驗很差

基于以上痛點，菜雞的我整合了一些開源技術(shù)搭了一套腳手架供自己使用，并分享給大家學(xué)習，如果對你有幫助請在github上面給我一個star🙏🙏🙏

2.腳手架核心技術(shù)

• 打包編譯 - vite
• 包管理 - pnpm
• 編程語言 - typescript
• 前端框架 - react
• 路由 - react-router
• UI組件庫 - antd
• cssinjs(不考慮性能開銷) - emotion
• 全局數(shù)據(jù)共享 - zustand
• 自動生成api - openapi
• 網(wǎng)絡(luò)請求 - axios
• 數(shù)據(jù)請求利器 - react-query
• 通用hook(可不用) - ahooks
• 錯誤邊界 - react-error-boundary
• 前端日志(暫未集成) - sentry-javascript
• hack - babel
• 代碼檢查 - eslint
• ts代碼檢查插件 - typescript-eslint
• 代碼美化 - prettier
• git鉤子 - husky
• commit格式化 -commitlint

2.自動基于后端swagger文件生成request函數(shù)

// src/core/openapi/index.ts// 示例代碼
generateService({// openapi地址schemaPath: `${appConfig.baseURL}/${urlPath}`,// 文件生成目錄serversPath: "./src",// 自定義網(wǎng)絡(luò)請求函數(shù)路徑requestImportStatement: `/// <reference types="./typings.d.ts" />\nimport request from "@request"`,// 代碼組織命名空間, 例如：Apinamespace: "Api",
});

3.調(diào)用接口示例

// HelloGet是一個基于axios的promise請求（自動生成）
export async function HelloGet(// 疊加生成的Param類型 (非body參數(shù)swagger默認沒有生成對象)params: Api.HelloGetParams,options?: { [key: string]: any },
) {return request<Api.HelloResp>('/gin-demo-server/api/v1/hello', {method: 'GET',params: {...params,},...(options || {}),});
}// 自動調(diào)用接口獲取數(shù)據(jù)
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 request<Api.HelloResp>('/gin-demo-server/api/v1/hello', {method: 'POST',headers: {'Content-Type': 'application/json',},data: body,...(options || {}),});
}// 提交編輯數(shù)據(jù)
const { mutate, isLoading } = useMutation({mutationFn: HelloPost,onSuccess(data) {setName(data?.data || "");},onError() {// 清除queryKey為hello的接口數(shù)據(jù)緩存，自動重新獲取接口數(shù)據(jù)queryClient.invalidateQueries({ queryKey: ['hello'] });}
})mutate({ name: "lisi" });

4.技術(shù)說明

• UI組件庫(ant-design):?開箱即用，省心省力。沒有選擇headless-ui，還沒有看到成熟的方案(chakra-ui使用成本也很高)，封裝成本高，會一直持續(xù)關(guān)注
• 通用hook(ahooks):?一個hook工具庫，沒有什么特別的亮點，就是hook增強，該庫可以依據(jù)個人喜好選擇是否使用
• 路由(react-router-dom):?自身默認支持錯誤邊界功能，我覺得react-error-boundary更好用點，所以用hack繞過了react-router-dom的錯誤邊界(ps: 暫時不支持參數(shù)禁用錯誤邊界)，react-router-dom官方?jīng)]有提供prop禁用默認的錯誤邊界
• 前端日志(sentry):?暫時未集成，需要進一步調(diào)研實用性和可用性
• 自動生成request函數(shù)(openapi):?后端接入apenapi后，前端可以根據(jù)openapi文件自動生成request api，通常使用基于openapi規(guī)范的swagger

5.前端架構(gòu)源碼

點此查看前端架構(gòu)源碼