Ant Design Pro

Table of Contents

Ant Design Pro 是一个前端的基于 React 脚手架(框架,开箱即用,提供了菜单和路由、数据处理等),设计是用于企业级中后台解决方案(内部系统之类的)。

1 技术栈

  • ES2015+,主要使用 JavaScript(废话)
  • React
  • UmiJS:可插拔的企业级 react 应用框架, 1.0 之前是使用 roadhog 的, umi = roadhog + 路由 。roadhog 封装了 webpack,简化 webpack 的配置
  • dva:数据流
  • antd:前端基于 React 的 UI 组件,类似 Bootstrap

所以,Pro 是什么?就是把这些组件全部封装起来,然后提供了一些范例。比较适合我这种不关心也不想深入学习前端技术,只想作为技术手段来实现前端开发的人。对于,一个专业的前端开发者,我不认为 Pro 是一个很好选择, 直接使用 React 原生的脚手架 create-react-app + webpack + antd 更好,或者使用 umi 也行。

Pro 没做什么太多额外的事情,而且臃肿的例子,删都要删除好久。目前还没有更好的解决方案。可以看我提的 issue

Pro 缺陷也是优势,对于我这样的伪前端(也不想深入)的人,只需要学习一下 ES6 和 React,然后照葫芦画瓢就可以开始写前端了。

2 如何评价 Pro 2.0

从 1.0 之前切换到 2.0,起初我是很抗拒的,因为 2.0 又加了很多乱七八糟的东西,改动比较大,菜单和路由合并了,这对于路由多的项目维护起来简直就是噩梦。

再加上鉴权系统变得更加的复杂了,我对 Pro 的鉴权系统一直都持否定的态度,鸡肋,需要的满足不了,不需要的剥离很费劲。

但是没办法啊,谁要自己前端菜呢,硬着头皮用了 2.0,砍无用的东西看了半天开才正式开始写(qwerty-client 就是这样)。用的时间长了,觉得 2.0 还是很不错的。直观上有几个地方值得夸赞:

  1. 配置更统一了,全部都在 config 文件下(用 umi 替代了 roadhog 之后)
  2. 默认支持按需加载,撒花
  3. model 支持 page model,即 page 私有的 model 只需要放在 page 自己的 models 文件夹下,无需像以前一样在 router 中注入,具体可以查看 umi 的文档
  4. 默认配置 alias,添加 @/ 别名到 src 目录,引用模块更加方便了

当然国际化这种功能我是不关心的。

3 Pro 和 UmiJS

Pro 封装了 umi,umi 配置文件为 .umirc.jsconfig/config.js ,Pro 中使用 config/config.js ,但是进行了一定的改造。

相关配置需求可以查看这两篇文档:

Pro 0.x 版本和 1.x 版本 npm run start 进度卡到 91% 问题,可通过 HARD_SOURCE=none npm start 来解决,一些讨论见:https://github.com/ant-design/ant-design-pro/issues/1520

2.0 之后似乎没有这个问题了,但是有个另外一个问题,每次修改了 less 文件之后,编译速度特别慢(less 每次都要全量编译,cpu 不好的话速度会很慢),解决办法是删掉 /config/plugin.config.js 文件。 删掉之后影响的是换主题,但是换主题实际在使用中基本上没啥用。讨论见:https://github.com/ant-design/ant-design-pro/issues/2947

4 如何评价 Pro 4.0

六月份发布了 v4 版本,一直比较忙也没时间去研究。从 0.x 版本用到 2.0 版本,我对 Pro 的发展一直不抱有很乐观的态度(甚至有些消极),以前在 issue 上有过一些争论,以至于对研发团队产品规划略有不满。

今天(2019-10-24)得空看了一下 v4 和 UmiJS,大有改观。涉及到我所关心的几个点列了一下:

  • v4 变成了 umi.js 的一个模板,安装也比较纯粹,选模板一样选择 ant design pro 即可;以前更像是 clone 下来完整的代码然后继续开发,不像是一个工具;
  • 抽象出 区块(Block) 的概念,把以前的组件全部单独出去,可插拔( umi block list ),框架不再臃肿,鉴权相关的也简单的许多, 早就该这么搞了,也是我以前感觉 Pro 定位不清晰的原因
  • layout 也抽象成了一个单独的组件: ant-design-pro-layout,这个有待商榷,这种是不是 antd 的责任?
  • 主打 Typescript,还好兼容 Javascript,一直没功夫学习 ts,学不动了

如果不是为了省事,直接使用 umi 创建一个 App 写模板也挺好的,成本也不高。这一次更新给研发团队点赞!

5 FAQ

5.1 部署时,文件名添加 hash 值

2.0 之后, npm run build 生成的 css 和 js 文件名不再包含 hash 值,这样会导致即便 nginx 设置了 index.html 不缓存,因为 css 和 js 每个版本的名字都是一样的,导致新版本更新之后,用户只有强制刷新浏览器才能生效。

解决办法是在 /config/config.js 中添加 hash:true ,这是 umi 的一个配置特性:

https://umijs.org/zh/config/#hash

5.2 npm run start 报错

npm run start 的时候,报错:

Module build failed: Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of 'decorators'.

解决的办法是用 npm install ,不要使用 cnpm 这种镜像。讨论在 ant-design-pro issues#2043 ,好像也没有看到具体的原因,应该是依赖问题。

之前用 npm 的时候也有类似的情况,一般是因为包依赖有问题,因为是镜像缘故,包的同步总会有先后顺序,卡到中间的时候就会出现依赖版本问题。

其实不光是 npm,其它的镜像也会出这种情况,比如 Emacs 的源引发的问题:swiper issue#2087

Date: 2019-06-03 17:37

Author: JerryZhang