漂亮的實力派 Ant Design Pro 2.0 正式發布

10-16

來自專欄螞蟻金服體驗科技227 人贊了文章

1.0 發布之後，Ant Design Pro 受到了業界廣泛關注和使用，GitHub 上 star 數一路增長到 11,686 個，在螞蟻金服內部也落地數百個中後台應用。

在這 8 個月內，2.0 研發計劃也在持續進行中，在給 V2 版本發起過 PR 的 38 位貢獻者幫助下，經歷了 600 個 commit，一次整體架構升級後，我們帶來了全新的 Ant Design Pro 2.0。在這個版本中我們帶來了四個全新的頁面、多種布局方式來豐富 pro 的使用場景、腳手架從 roadhog 切換到了 umi2，並且加入了一個炫酷的設置抽屜。預覽界面參見 https://preview.pro.ant.design 。

?? 全新的頁面

作為西湖區最具影響力 web 設計規範，優雅美觀，精心設計的界面一直是我們主打優勢。V2 中我們也帶來了一系列界面更新與優化，引入四個新的界面：

分步對話框
信息錄入對話框
個人中心
個人設置

?? 新布局和主題

在 V2 中我們內置了多種布局方式，你可以通過簡單配置組合出多種多樣的界面來滿足需求，總有一款適合你。為了方便大家更快看到效果，我們開發了一個炫酷的設置抽屜來進行主題和布局切換。確認效果後你可以拷貝設置，並且將其設置為默認，換主題 so easy，更重要的是全程都是在線，無需重啟腳手架，立等可見。

? 腳手架切換到 umi

umi 中文可發音為烏米，是一個可插拔的企業級 react 應用框架。umi 以路由為基礎的，支持類 next.js 的約定式路由，以及各種進階的路由功能，並以此進行功能擴展，比如支持路由級的按需載入。然後配以完善的插件體系，覆蓋從源碼到構建產物的每個生命周期，支持各種功能擴展和業務需求，目前內外部加起來已有 50+ 的插件。

umi 是螞蟻金服的底層前端框架，已直接或間接地服務了數百個應用，包括 java、node、H5 無線、離線（Hybrid）應用、純前端 assets 應用、CMS 應用等。它已經很好地服務了我們的內部用戶，同時希望它也能服務好外部用戶。

它包含以下特性：

?? 開箱即用，內置 react、react-router 等
?? 類 next.js 且功能完備的路由約定，同時支持配置的路由方式
?? 完善的插件體系，覆蓋從源碼到構建產物的每個生命周期
?? 高性能，通過插件支持 PWA、以路由為單元的 code splitting 等
?? 支持靜態頁面導出，適配各種環境，比如中台業務、無線業務、egg、支付寶錢包、雲鳳蝶等
?? 開發啟動快，支持一鍵開啟 dll 和 hard-source-webpack-plugin 等
?? 一鍵兼容到 IE9，基於 umi-plugin-polyfills
?? 完善的 TypeScript 支持，包括 d.ts 定義和 umi test
?? 與 dva 數據流的深入融合，支持 duck directory、model 的自動載入、code splitting 等等

??? 支持組件按需載入

在 pro 中我們提供了一些封裝更加高級的組件，在 V2 中我們還提供了按需載入功能，只要在 babel-plugin-import 做如下配置：

{ libraryName: ant-design-pro, libraryDirectory: lib, style: true, camel2DashComponentName: false, }

就可以像 antd 一樣使用 pro 組件，我們強烈推薦這種方式，可以顯著減少包大小。

import { Result } from ant-design-pro;ReactDOM.render(<Result type="success" />, mountNode);

?? 國際化最佳實踐

V2 中提供了基於 umi-plugin-locale 的國際化最佳實踐，只需要在 src/locales 中引入相應的 js，例如 en-US.js 和 zh-CN.js，然後我們就可以在代碼中愉快的使用國際化的相關能力了。

import { formatMessage, setLocale, getLocale, FormattedMessage,} from umi/locale;export default () => { return <div><FormattedMessage id="test" /></div>}

?? 展望未來

在未來我們將持續關注 pro 的性能和易用性。並會和 umi 一起在組件物料化方面做一些探索，持續完善文檔，降低大家使用成本。更加好看和好用會是我們一直的努力方向。

?? 特別鳴謝

感謝所有提交錯誤、發起PR、回復問題、編寫文檔等的人！特別感謝以下幾位社區小夥伴 @yoyo837 @xiaohuoni @zhangxiuling @kaoding ，以及為 V2 發起過 PR 的 38 位貢獻者，你們的參與讓 pro V2 的發布成為現實。

如果你在使用 Ant Design Pro 時遇到任何問題，可隨時在 GitHub 提交問題。

感謝你的閱讀，敬請安裝、嘗試。 ??

原文鏈接