公司出品|对外开放源码中国
Ant Design 5.0 已在上周五正式宣布正式宣布发布。
Ant Design 合作开发项目组表示，同上一个大版正式宣布发布那样，他们Sonbhadra把 v4 从主组成部分转换至 4.x-stable 组成部分进入保护状况。v4 将会继续保护 1 年时间，仍然会对 Bug 正式宣布发布 Patch，但是其后无须转交捷伊 Feature Request。止年份为 2023 年月底。原 v4 官方网站北迁至 https://4x.ant.design/。
上面的重要预览内容Lezoux 正式宣布发布文件格式。
结构设计升级换代
结构设计各方面，他们依照另一方面销售业务课堂教学和街道社区声浪，增加了 4 类新模块和 4+ 表音文本模块， 那些模块都经过细致的考究，保证了其适用性和可扩展性，希望它们为你带来较好的采用新体验。同时，他们将外部采用好久的一些轻型资产对外开放出来，协助大家服务项目更多的销售业务情景。
除此之外在预设式样各方面，他们对模块展开全面性升级换代。秉承欢乐工作的Mach，他们从「更著眼」、「去阻碍」、「曼基夫」三个路径Vertus听觉展开了升级换代。其中牵涉到底色、梯形、文本棕褐、可视化意见反馈等数个自上而下式样的强化和调整，除此之外他们还对导航系统架构和几乎所有模块做了去ED500处置。那些改变，除了能领略到你焕然一捷伊觉得，在具体内容采用过程中，也更加功能强大。当然，如果你对式样主轴有不那样的审美观和政治理念，在 5.0 之中，你可以轻而易举依照他们提供的式样演算法和实用性辅助工具，全屏订制归属于你自己的主轴。
最后，他们始终以人为本，正在试验名叫「欢乐工作」的主题包，内含情感增强特色模块，用户在特定情景采用时，会有丰富但克制的动画，为用户带来一点 “欢乐感”。他们希望这是一个开始，呼吁行业结构设计多关注企业级产品，为冰冷的企业级产品注入更多的情感去关怀他们的用户。欢乐工作主轴包将在正式宣布发布会后推出，敬请期待～
全新 Design Token 模型
在 v4 版中，他们提出更多的 less 变量以支持主轴订制能力。然而除了色板支持完全的派生能力外，其他如字体、行高、间距都没有对应的演算法。在 v5 中，他们改造了所有的 Token，使其基于 Seed + Algorithm 可以派生出所有的 Design Token。全捷伊 Design Token 模型支持多算法 Pipeline，从而大大降低合作开发者拓展成本。你可以选择一个现成的演算法，再加自己的拓展部分演算法（当然你也可以写一套完整的演算法），就可以生成一套完整的 Design Token：
CSS-in-JS 动态主轴
过去他们尝试通过 CSS Variables 提供动态主轴能力。在经过一段时间的探索后，他们发现随着结构设计系统的复杂度提升，其中间变量的保护成本就会变得不可忽略。因而在 v4 时期，CSS Variables 停留在了动态主轴色而没有进一步提供暗色、其他 Token 的动态能力。到了 v5，随着灵活性的需求呼之欲出，他们不得无须次面对动态主轴的问题。
在 v5 启动伊始，他们花了几个月的时间对比当下流行的动态主轴方案：CSS Variables 与 CSS-in-JS。CSS-in-JS 不需要保护中间变量，但是有更多的运行时消耗（如果你对此不太熟悉，欢迎阅读 Why Were Breaking Up with CSS-in-JS）。从保护成本而言，他们更倾向于后者，但是他们并不希望因此而损害用户新体验。因而在经过一系列尝试后，他们研发了一套针对模块级别的 CSS-in-JS 库@ant-design/cssinjs
通过动态主轴能力，你通过 ConfigProvider 可以任意调整、嵌套主轴：
甚至可以针对某一个模块进行调整：
代码示例太乏味？你可以直接在他们的首页新体验示例：
捷伊 CSS-in-JS 方案原生支持 Tree Shaking，在 v5 你不在需要采用 babel-plugin-import摘除未采用到的样式。捷伊方案将自动按需加载式样。
更多模块
新增 FloatButton 模块用于网站上的自上而下功能，原 BackTop 将收为其子模块：
新增 Tour 模块用于引导用户了解产品功能：
此外，他们还提供了一些模块的表音文本用于内联采用：
兼容性调整
浏览器最低版调整
今年 6 月 IE 宣布停止保护，因此 Ant Design v5 兼容性调整从 IE 11 提升至 Edge，其余现代浏览器不变。IE 兼容性式样代码将全部移除。至此，他们可以通过 CSS Logical Properties 将 RTL 与 LTR 式样合并，进一步减少保护成本。
预设 Day.js 代替 Moment.js
Moment.js 在 2020 年转为 Legacy Project。考虑到转换年份库会导致 Break Change，他们在 v4 时期选择继续采用 Moment.js 直至 v4 结束。到了 v5，他们转换为更轻量级的 Day.js。Day.js 除了包体积更小之外，也带来了 immutable 能力。
当然，如果你希望项目升级换代后仍然采用 Moment.js，可以通过 @ant-design/moment-webpack-plugin 插件展开替换。
API 非 Break 调整
Ant Design 在 7 年的研发过程中，部分 API 出现分叉的情况。这导致合作开发者有额外的记忆成本，同时也使得他们新增 API 时也难以选择。原本他们计划对一系列 API 展开整理合并，同 v3 升级换代 v4 那样在当前版提示合作开发者北迁 API，并在 v5 移除废弃 API。但是在经过街道社区交流之后，他们决定改变计划为：每个大版只会调整少量 API，并且原废弃 API 在新版中会继续兼容，推迟到下下个大版移除。这次他们改动以下部分，并且 v5 会全部兼容原来写法：
弹层类模块 open 与 visible 统一至 open以符合 HTML Spec。
dropdownClassName 与 popupClassName 统一至 popupClassName 以更符合语义。
结构语法糖（例如 ）采用数据驱动代替，以为性能强化做准备。
废弃静态方法（例如Message.error），推荐应用层封装以支持 React 18 concurrent 模式。
模块移除
v5 Sonbhadra移除 Comment 模块 与 PageHeader 模块，BackTop Sonbhadra成为 FloatButton 子模块。由于 Comment 模块本身除式样外并未提供实际能力，合作开发者仍然需要额外工作来实现评论功能。此外由于实际采用情景不多，他们决定从 v5 中移除，但是你仍然可以在兼容包中找到它。PageHeader 模块同样需要一定的合作开发工作来使其工作，因而他们将其挪至 ProComponents 中，与 ProLayout 一同采用从而提供真正的可视化能力。
如何升级换代
如 兼容性调整 所述，由于 v5 不会对 API 做 Break Change，因而你可以尝试通过他们的 codemod 辅助工具展开北迁。对于 Moment.js 可以采用他们提供的@ant-design/moment-webpack-plugin 插件展开替换。如果你的项目依赖了 antd 的 less 文件，请参考他们的北迁文件格式通过 less-loader 展开兼容。详细文件格式请点击此处查阅。
未来规划
未来他们计划提供更多的模块，有些已经排上议程，例如 WaterMark、QrCode、ColorPicker。而针对 Table 性能的热烈声浪他们已经听到，计划为展示态提供虚拟滚动能力，其Sonbhadra原生支持固定列能力。此外，由于在 v4 中，他们已经收敛结构语法糖至数据驱动属性中，他们有了更好的机会对性能做强化，包括不仅限于 Menu、Table、Steps、Collapse、Tabs、Dropdown 等等。
结构设计侧，他们Sonbhadra预览官方站点提供更多模块级别的结构设计指引，这Sonbhadra由结构设计项目组持续预览。过去他们在中文街道社区写了不少文章，他们希望也趁此机会将文章提供英文版，让国际合作开发者、结构设计师可以共同阅读。让他们拭目以待。
完整 Changelog：https://ant.design/changelog-cn
