image.png

React 通過 JSX 提供靈活的組件化開發(fā)，將 HTML 與 JavaScript 邏輯結(jié)合，使開發(fā)更直觀。其虛擬 DOM 和 Fiber 架構(gòu)提升性能，通過高效的差異對比和異步渲染，使復(fù)雜應(yīng)用更流暢。
React 擁有龐大的生態(tài)系統(tǒng)和社區(qū)支持，豐富的第三方庫和工具（如 Redux、React Router）以及廣泛的企業(yè)采用（如 Facebook、Netflix）推動其發(fā)展。Create React App 簡化項目初始化，內(nèi)置現(xiàn)代開發(fā)配置。React Developer Tools 提供強大調(diào)試功能，React Native 擴(kuò)展技術(shù)棧到移動端，Hooks API 推動函數(shù)式編程，使代碼更簡潔和可重用。

React系列系列：
前端React系列一: React簡介
前端React系列二: create-react-app簡介
前端React系列三: TypeScript簡介
前端React系列四：Ant Design簡介
前端React系列五：React+CRA+TS+Ant Design高效開發(fā)前端
前端React系列六：ant-design-pro簡介
前端React系列七：ant-design-pro架構(gòu)
前端React系列八：ant-design-pro輔助開發(fā)命令
前端React系列九：Umi簡介
前端React系列十：Umi環(huán)境變量

前言

Ant Design Pro 是一個完整的前端解決方案，專為企業(yè)級中后臺應(yīng)用而設(shè)計。它基于 Ant Design 設(shè)計語言，采用 React 技術(shù)棧，并集成了 UmiJS 和 Dva 等工具。以下是對 Ant Design Pro 架構(gòu)的詳細(xì)分析：

總體架構(gòu)

我們可以通過下面的大圖來了解整個 Ant Design Pro 的架構(gòu)。

image.png

Ant Design Pro 的架構(gòu)由以下幾個關(guān)鍵部分組成：

• UI 層：基于 Ant Design 的高質(zhì)量組件庫。
• 數(shù)據(jù)層：通過 Dva 管理應(yīng)用狀態(tài)和數(shù)據(jù)流。
• 路由層：由 UmiJS 提供路由管理。
• 構(gòu)建和工具鏈：Webpack、Babel、ESLint 等工具集成。
• 開發(fā)和測試：Jest 和 Enzyme 進(jìn)行測試，Prettier 和 ESLint 確保代碼質(zhì)量。

核心技術(shù)棧

UmiJS

• 插件化框架：UmiJS 是一個插件化的前端框架，提供了強大的路由管理和工程化支持。
• 文件即路由：根據(jù)文件結(jié)構(gòu)自動生成路由配置。
• 動態(tài)加載：支持按需加載，提升性能。
• 插件機(jī)制：通過插件系統(tǒng)擴(kuò)展功能，適應(yīng)不同的項目需求。

Dva

• 狀態(tài)管理：基于 Redux 和 Redux-saga，簡化了狀態(tài)管理。
• 模型（Model）：將 state、reducers、effects、subscriptions 結(jié)合在一起，通過 model 組織狀態(tài)和邏輯。
• 數(shù)據(jù)流：提供清晰的數(shù)據(jù)流動，便于調(diào)試和維護(hù)。

Design

• 組件庫：提供了豐富的 UI 組件，如表單、表格、按鈕等，提升開發(fā)效率。
• 設(shè)計語言：統(tǒng)一的設(shè)計規(guī)范和風(fēng)格，確保應(yīng)用界面一致性。
• 定制化：支持主題定制和樣式覆蓋，滿足個性化需求。

項目結(jié)構(gòu)

Ant Design Pro 的項目結(jié)構(gòu)合理，便于組織和管理代碼。典型的項目結(jié)構(gòu)如下：

/public         // 公共資源文件，如 HTML 模板和靜態(tài)資源
/src
  /assets       // 靜態(tài)資源，如圖片、樣式文件等
  /components   // 通用組件
  /models       // Dva 數(shù)據(jù)模型，用于管理全局狀態(tài)
  /services     // 與后臺接口的交互邏輯
  /utils        // 工具函數(shù)和公共方法
  /layouts      // 布局組件
  /pages        // 頁面組件
  /locales      // 國際化資源文件
/config         // UmiJS 的配置文件
/mock           // 模擬數(shù)據(jù)，用于本地開發(fā)和測試

核心功能

組件化開發(fā)

• 高質(zhì)量組件：Ant Design 提供的組件封裝了常見的 UI 交互模式，開發(fā)者可以直接使用這些組件構(gòu)建頁面。
• 模塊化：通過組件化開發(fā)，提升代碼的復(fù)用性和維護(hù)性。

路由管理

• 文件即路由：UmiJS 根據(jù)文件結(jié)構(gòu)自動生成路由配置。
• 動態(tài)加載：支持代碼分割和按需加載，優(yōu)化性能。

狀態(tài)管理

• 簡化 Redux 使用：Dva 提供了簡潔的 API，將 Redux 和 Redux-saga 的優(yōu)點結(jié)合，降低了使用門檻。
• 模型概念：通過 model 將 state、reducers、effects、subscriptions 結(jié)合在一起，便于管理。

國際化支持

• 內(nèi)置國際化：Ant Design Pro 提供了國際化支持，通過 /locales 文件夾管理多語言資源文件。

權(quán)限管理

• 基于角色的訪問控制（RBAC）：支持基于角色的權(quán)限管理，開發(fā)者可以根據(jù)業(yè)務(wù)需求定制權(quán)限規(guī)則。

模擬數(shù)據(jù)

• 本地開發(fā)和測試：通過 /mock 目錄和配置文件，支持模擬數(shù)據(jù)的生成和接口的模擬。

構(gòu)建和工具鏈

Webpack

Webpack 可以幫助我們完成一些任務(wù)。比如 js 壓縮、css 壓縮、編譯模板文件等等，從而減少前端的工作量。當(dāng)然，Webpack 功能很強大，能幫我們完成的工作遠(yuǎn)遠(yuǎn)不止這些。

• 模塊打包：將模塊化的 JavaScript 文件及其依賴打包成靜態(tài)資源。
• 插件和加載器：通過插件和加載器擴(kuò)展功能，如 Babel-loader 處理 ES6+ 代碼，CSS-loader 處理 CSS 文件。
• 開發(fā)服務(wù)器：提供熱模塊替換（HMR），提升開發(fā)效率。

Babel

• JavaScript 編譯器：將現(xiàn)代 JavaScript 語法轉(zhuǎn)換為舊版本瀏覽器兼容的代碼。

fabric

pro 內(nèi)置了 fabric 作為了編碼規(guī)范，fabric 提供了嚴(yán)格但是不嚴(yán)苛的 lint 規(guī)則集，包含 eslint，stylelint，prettier 三種工具，可以顯著的提升代碼質(zhì)量，規(guī)范代碼風(fēng)格。

• 代碼質(zhì)量：通過 ESLint 進(jìn)行代碼靜態(tài)分析，發(fā)現(xiàn)潛在的問題。
• 代碼風(fēng)格：通過 Prettier 統(tǒng)一代碼格式，保證代碼風(fēng)格一致。

umi 與 webpack

運行時和編譯時

Pro 的底座基于 umi， umi 與 webpack 相比增加了運行時相關(guān)的能力，我們在開發(fā)中有時候可能難以區(qū)分。

• 編譯時 指的是代碼在編譯的時候做的事情，這個階段的環(huán)境一般是 node 環(huán)境，可以使用 fs，path 等功能。但是同時因為沒有使用 webpack ，所以 jsx，引入圖片等非 node 的能力是無法使用的。
• 運行時 是指代碼已經(jīng)編譯完成開始運行的階段，這個階段一般是瀏覽器環(huán)境，不能使用 fs，path 等功能，訪問 url 也會有跨域的問題，但是這個環(huán)境被 webpack 編譯過，所以可以寫 jsx，導(dǎo)入圖片等功能。

運行時和編譯時兩個環(huán)境用起來容易混淆，這里有一個簡單的版本:

• src 文件夾中都是運行時的代碼，都會經(jīng)過 webpack 編譯。
• 其他目錄的都可以認(rèn)為是編譯時，可以使用 node 能力。

這也是為什么我們不能在 config.ts 里面寫 JSX 的原因。

umi-插件化的前端框架

umi作為Pro 的底座 ，它是一個 webpack 之上的整合工具。 umi 相比于 webpack 增加了運行時的能力，同時幫助我們配置了很多 webpack 的預(yù)設(shè)。也減少了 webpack 升級導(dǎo)致的問題。這也是我們能提供插件的原因。

• @umijs/plugin-access，權(quán)限管理
• @umijs/plugin-analytics，統(tǒng)計管理
• @umijs/plugin-antd，整合 antd UI 組件
• @umijs/plugin-initial-state，初始化數(shù)據(jù)管理
• @umijs/plugin-layout，配置啟用 ant-design-pro 的布局
• @umijs/plugin-locale，國際化能力
• @umijs/plugin-model，基于 hooks 的簡易數(shù)據(jù)流
• @umijs/plugin-request，基于 umi-request 和 umi-hooks 的請求方案

如果不喜歡 umi 默認(rèn)的配置，可以在這里看看有沒有你喜歡的配置。如果還是不能滿足就要自定義 webpack 了，chainWebpack 可以自定義內(nèi)置的 webpack 配置。

webpack 對于 node 也是有版本需求的，不同 webpack 對 node 版本的依賴也不同，所以最好的辦法是升級到最新的長期維護(hù)版本。

開發(fā)和測試

Jest 和 Enzyme

• 單元測試：通過 Jest 編寫和運行單元測試，確保代碼的正確性。
• 組件測試：通過 Enzyme 測試 React 組件的行為和渲染結(jié)果。

總結(jié)

Ant Design Pro 是一個強大且靈活的前端框架，結(jié)合了 UmiJS、Dva、Ant Design 等現(xiàn)代前端技術(shù)，提供了豐富的功能和工具。其合理的項目結(jié)構(gòu)、高質(zhì)量的 UI 組件、完善的狀態(tài)管理和國際化支持，使其成為構(gòu)建企業(yè)級中后臺應(yīng)用的理想選擇。通過使用 Ant Design Pro，開發(fā)者可以快速搭建高質(zhì)量的中后臺應(yīng)用，提高開發(fā)效率和代碼質(zhì)量。