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

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，而且加入了一個炫酷的設置抽屜。預覽界面參見 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 提交問題。

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

原文連接