间隔 Pro 的上个版本宣布已过去了 8 个月，Pro 也举行了许多的迭代，然则大部分更新依然以修复 bug 为主。在此期间我们碰到了许多运用 Pro 的痛点，也在思索怎样能够处理这些题目。与此同时悉数前端业界也在发生着变化，跟着营业的复杂化，微前端已呼之欲出。相似阿里云的控制台如许的上百页面，几百位开辟者配合协同的项目也会越来越多。Serverless 蒸蒸日上，前端上云也仍在探究，天天都有新的应战。
v4 就是我们应对应战的最新尝试，我们带来了 TypeScript，Layout 组件，区块等新特征，而且逐渐抽离 Pro 的组件到 Ant Design 中。同时我们也带了新的项目建立体式格局，显著的削减了冗余的代码。
🚀 疾速最先
新建一个空的文件夹作为项目目次，并在目次下实行：
yarn create umi // or npm create umi挑选 ant-design-pro 就是 v4 的脚手架了。
Select the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
app - Create project with a simple boilerplate, support typescript.
block - Create a umi block.
library - Create a library with umi.
plugin - Create a umi plugin.脚手架将会自动装置，然后运转即可跑起一个 Ant Design Pro V4 的项目！
yarn
yarn start🏆 TypeScript
在 v4 中，不管脚手架照样区块悉数用 TypeScript 重构。TypeScript 对开辟的提效异常显著，优越的生态，能极大的削减你的查询 API 的时刻。更可根绝的输错参数或许拼错变量名这类初级毛病，更棒的是因其壮大的范例的表达才能，你能够更轻松的读懂一个旧的项目。因为范例在肯定状况下能够当做文档运用。
TypeScript 更大的上风在于简化了重构的难度。当你接办一份并不怎样硬朗的遗留代码时，TypeScript 的静态范例搜检会使你事半功倍。重构能够激发的范例毛病，在开辟时便可发明。比方晋级 antd@2 到 antd@4，假如没有 TypeScript，很难设想你在上线时要蒙受多大的心理压力。
我们希冀有一天你接办项目的时刻，发明它运用了 Pro 的脚手架而使你觉得放心。你能够疾速上手，疾速开辟，而且运用雷同的笼统模子和代码作风。为了更好地做到这一点，TypeScript 是必不可少的一环。
为了顺应更多的状况，我们还分外供应了 JavaScript 的版本，在初始化项目的时刻能够挑选 JavaScript 的脚手架。
👎 JavaScript 丧失了许多特征，对编辑器也不够友爱。我们强烈建议你优先尝试运用 TypeScript。
📦 Layout
在 v2 的版本中，最先一个新项目的流程平常都是：
- clone 项目
- 删除用不到的页面
- 最先开辟
大部分参考页面你都不肯定会用到，然则 Layout 是肯定会保存的 😁。
Pro 的 Layout 的具有许多很棒的功用，不管是自动天生菜单，自动天生面包屑。种种雅观的计划，即使是一个刚打仗前端的同砚，也能够为本身的项目疾速搭建起一个框架。
然则壮大也代表了烦琐，越发落井下石的是我们将一切的代码细节暴露给了每一个用户。虽然 Layout 看起来只是一个UI，然则逻辑却疏散在多个文件中。关于开辟者来讲他能够只关注展现结果，然则为了修正一个小小的处所能够须要在好几个文件中跳转，还须要细心地视察数据的流向。关于开辟者来讲这是个很大搅扰。更不用说烦琐的晋级体式格局，险些没有用户会在表现一般时晋级 Layout。
为了处理这些题目 ，v4 中我们抽离了 Ant Design Pro Layout。如今它作为一个包从新上台，保存了本来险些一切的功用！而运用起来只需短短几行代码：
import ProLayout from '@ant-design/pro-layout';
render(
<ProLayout
logo={<img src="https://demo.com/logo.png" />}
layout="sidemenu"
navTheme="dark"
fixSiderbar
locale="zh-CN"
/>
, document.getElementById('root'));或许你的代码已成型良久，然则没紧要，你也能够疾速的接入。而且它只与 antd 耦合。这意味着它能够支撑一切的脚手架。
在可定制性轻易我们供应了异常异常多的 render 要领，你险些能够自定义 render 任何的块 menu、header、footer 以至是 title。在 api 方面也是挨近 antd 的成熟计划。假如你熟习 antd 的，用起来就会像一个壮大的 antd 的组件一样，没有上手本钱。假如你想立马尝试，看这里 )@ant-design/pro-layout。 迎接点赞吐槽。或许提议 PR。
🐱 组件
Pro 中供应了一系列的组件。在 v4 中，我们将他们删除，他们将会逐渐的沉淀到 Ant Design 中去，在 Ant Design 中他们会获得更好的支撑，更棒的社区，以及越发硬朗完美的 api。
有一些你如今就能够最先运用 Descriptions、PageHeader、Typography ，这些组件能够满足异常多的页面展现需求。Pro 中那些着重营业的组件，我们倾向于运用区块来举行装置。
🎯 区块 （Block）
在 v4 中我们将 Pro 的资产分成了两块，Layout 和 Pages ，一切的界面都是这两部分构成的。我们将 Layout 组件化来供应开辟效力，而区块就是我们对 Pages 提效的处理计划。每一个区块都是一个页面 ，它能够带着本身的状况，本地化，以至是 mock 数据和 server。基于 umi 的才能能够让它们轻易疾速的集成在脚手架中。
因为区块的特征，你新建的项目都邑异常简约，没有过剩依靠，没有你用不到的一堆页面。它看起来是如许的：
假如你须要 Pro 中的页面，你能够经由过程区块疾速增加。在 Pro 的演示网站中我们增加了一个按钮，当你愿望运用这个页面到项目中，你能够经由过程点击并拷贝下面这行代码，将这个区块下载到你的项目中去。就像去商场购置一件商品一样简朴：
假如你全都要（WOW!） ，你能够在项目中运转 npm run fetch:blocks ，我们的剧本将会下载一切 Pro 中区块到项目中，轻易你举行演示。
在带来优点的同时区块也造成了一些题目， 最为显著的就是冗余的代码量，这将会是我们将来事情的重点。
✨ 晋级到 v4
Ant Design Pro 4.0 兼容了 2.0 的一切特征，从 2.0 晋级到 4.0 不须要要做任何修改。在 Ant Design Pro 4.0 中，我们将 Layout 抽离成了零丁的组件。你能够挑选将其替代成最新的组件。
npm i @ant-design/pro-layout --save于 src/layouts 目次下，删除 BasicLayout.js 和 BasicLayout.less。用 新版 BasicLayout.tsx 替代掉。
假如你修正了原
BasicLayout，记得将变动的逻辑应用到替代后的文件中。
🧩 Ant Design 4.0
与此同时我们也在紧锣密鼓的谋划下一个 Ant Design 的大版本，估计在 2019 年 Q4 宣布 Ant Design 4.0 版本 🍻，我们计划在 4.0 中处理一些饱受诟病的题目。
- 面向将来，摒弃老的浏览器和 React 15，兼容行将到来的 React 17。
- 最大水平向下兼容。
- 症结组件重构重做。
- 机能更好、体积更小。
你能够在这篇 Ant Design 4.0 看到完整的路线图。
🥇 展望将来
从 2017 年 10 月 29 日 年 @afc163 宣布了第一个版本以来，到如今的 2019 年 Pro 发生了许多的转变，底层框架修正为 umi，代码构造体式格局改成区块，完整的拥抱的 TypeScript，能够说已和当初谁人 Pro 已不是同一个脚手架了，Ant Design 也宣布了 4.0 的计划，在将来 Ant Design Pro 和 Ant Design 也将不停迭代下去。不管代码怎样转变，我们的初心和愿景不会转变，提拔每一位用户的开辟效力，为每一个用户带来最极致的开辟体验。
🌚 另有一件事
跟着各大操作系统和浏览器支撑 dark 形式。Ant Design Pro 和 Ant Design 也在做一些开辟来支撑 dark 主题，这个计划如今还不够完美，假如你想尝鲜，迎接装置试用。
🤝 迥殊道谢
谢谢一切提交毛病、提议PR、复兴题目、编写文档等的人！迥殊谢谢这两位社区同伴 @xiaohuoni @imhele，他们负担了很大一部分的 v4 开辟事情。
假如你在运用 Ant Design Pro 时碰到任何题目，可随时在 GitHub 提交题目。
谢谢你的浏览，敬请装置、尝试。 🎉
