Ant Design 5.0 正式發(fā)布！

一、前言
Ant Design鏈接：

https://github.com/ant-design/ant-design

https://ant.design/components/overview-cn/

今天Ant Design發(fā)布了V5版本，讓我們來(lái)看看更新了哪些內(nèi)容。
新增組件
新增組件變體
設(shè)計(jì)變化
新增導(dǎo)出對(duì)象 theme，用于獲取主題相關(guān)屬性
ConfigProvider 新增 theme 屬性，用于更改主題配置
產(chǎn)物新增 locale 目錄，內(nèi)含 cjs 格式的語(yǔ)言文件
移除了一些內(nèi)容
二、正文
全新 Design Token 模型

























在 v5 中，官方改造了所有的 Token，使其基于 Seed + Algorithm 可以派生出所有的 Design Token。全新的 Design Token 模型支持多算法 Pipeline，從而大大降低開發(fā)者拓展成本。
我們可以選擇一個(gè)現(xiàn)成的算法，再加自己的拓展部分算法（當(dāng)然也可以寫一套完整的算法），就可以生成一套完整的 Design Token：



CSS-in-JS 動(dòng)態(tài)主題
官方棄用 less，采用 CSS-in-JS，更好地支持動(dòng)態(tài)主題。

 v5 官方研發(fā)了一套針對(duì)組件級(jí)別的 CSS-in-JS 庫(kù) @ant-design/cssinjs。它通過(guò)犧牲動(dòng)態(tài)性來(lái)獲取更高的緩存效率，從而減少運(yùn)行時(shí)的性能損耗。

https://www.npmjs.com/package/@ant-design/cssinjs

通過(guò)動(dòng)態(tài)主題能力，你通過(guò) ConfigProvider 可以任意調(diào)整、嵌套主題：

<ConfigProvider theme={{ token: { colorPrimary: 'red' }}}>
  <ConfigProvider theme={{ token: { colorPrimary: 'blue' }}}>
    <MyApp />
  </ConfigProvider>
</ConfigProvider>
甚至可以針對(duì)某一個(gè)組件進(jìn)行調(diào)整：

<ConfigProvider theme={{
  components: {
    Button: { colorText: 'red' },
  },
}}>
  <MyApp />
</ConfigProvider>






新的 CSS-in-JS 方案原生支持 Tree Shaking，在 v5 不在需要使用 babel-plugin-import 摘除未使用到的樣式。新的方案將自動(dòng)按需加載樣式。

更多組件
新增 FloatButton 組件用于網(wǎng)站上的全局功能，原 BackTop 將收為其子組件：



新增 Tour 組件用于引導(dǎo)用戶了解產(chǎn)品功能：



提供了一些組件的變體用于內(nèi)聯(lián)使用：



兼容性調(diào)整
Ant Design v5 兼容性調(diào)整從 IE 11 提升至 Edge，其余現(xiàn)代瀏覽器不變。IE 兼容性樣式代碼將全部移除。

默認(rèn) Day.js 代替 Moment.js
Day.js 除了包體積更小之外，也帶來(lái)了 immutable 能力。
如果希望項(xiàng)目升級(jí)后仍然使用 Moment.js，可以通過(guò) @ant-design/moment-webpack-plugin 插件進(jìn)行替換。

組件移除
v5 將會(huì)移除 Comment 組件 與 PageHeader 組件，BackTop 將會(huì)成為 FloatButton 子組件。

三、最后
V5發(fā)布了，生產(chǎn)環(huán)境廣東靚仔建議先等等再使用，等“坑”被埋的差不多了，那時(shí)候就可以大膽更新了。

作者：前端早茶


歡迎關(guān)注：前端早茶