Umi UI 一期 做好了一个架子,但只是包含一些基础功能,而要做提效,则需要一些实打实的功能。一个月后的 Umi UI 二期带来了一些进阶功能,比如资产(区块+模板)、Mini 气泡、编译态同步、build 和 dev 文件分析等。
新功能
资产市场(区块和模板)
支持区块和模板的查看、预览,以及把他们添加到项目甚至指定页面里。我觉得这是可能带来大幅提效的一个功能,当然还得取决于资产的质量和数量,如果现有区块模板和项目需求的匹配度高,那提效幅度会很大。
注:由于暂不支持撤回操作,建议添加之前通过 git 提交代码保存之前的变更。
Mini 气泡
用户使用 UMI UI 不仅仅是通过 umi ui 命令,还可以通过 umi dev 使用。Mini 气泡是在 umi dev 时默认注入到项目预览界面的右下角气泡,通过此气泡可完成 Umi UI 的大部分功能,包括配置、任务、以及前面介绍的区块和模板的添加。
其中区块的添加结合 Mini 气泡会有更好的体验,用户可以选择把区块添加到页面的哪个区域。
由于气泡会在侵入用户代码,为了减少潜在的影响面,此功能暂时灰度开启。灰度策略如下:
ant-design-pro 项目默认开启
react 配置配了小于 16 默认不开启
如果你的项目不在灰度范围内,可通过环境变量 UMI_UI=1 强制开启;如果在灰度范围里却不想要,也可通过 UMI_UI=none 关闭。
Webpack 编译状态同步
不知大家是否经常会切到命令行去查看 Webpack 编译是否完成?这次我们把编译状态同步到 Mini 气泡上,所以不用切到命令行也能感知 Webpack 编译状态了。
任务的 build 和 dev 分析
增加了 build 和 dev 时的文件尺寸和占比分析。
umi-plugin-react 配置
如果有使用 umi-plugin-react,把他升级到最新版,就可以对此插件进行可视化配置。
优化打开编辑器
编辑器打开更准确。
资产市场
为了更好地使用资产市场功能,我们需要了解模板和区块这两个概念,但其实很好区分,
模板是一个页面
区块是页面中的一小块
他们都可以被添加到项目里。而常见的操作是先添加一个模板,再往这个模板里添加区块。
然后,现在的资产数据有几个来源:
antd-pro 的所有页面组成的 28 个模板
antd 的所有示例代码组成的 400 多个区块
如果大家要贡献代码,可以往 umi-blocks 里提。
使用
先确保本地的 umi 在 2.10.0 或以上。
$ umi -v
2.10.0
项目
如果是 ant-design-pro 项目,直接执行 npm start ;如果不是,需要加环境变量 UMI_UI 开启,执行, UMI_UI=1 npm start 。
尝鲜
Windows 下部分命令可能有差异,请自行区分。
如果只是想跑跑看二期的区块功能,也可以找个空目录执行以下步骤,
$ mkdir myapp && cd myapp
# 区块添加需要 package.json
$ echo {} > package.json
# 使用配置式路由,区块添加暂不支持约定式路由
$ umi config set routes '[]'
# 生成最简页面
$ umi g page index
# 由于不是 ant-design-pro 项目,通过环境变量 UMI_UI 强行开启
$ UMI_UI=1 umi dev
启动之后,点右下角的 Mini 气泡进行区块添加。
如果你添加的是 antd 的区块,可能看到是这样的,没有样式,那是因为没有配 antd 的按需编译,导致样式没有载入进来。
# 安装依赖
$ yarn add umi-plugin-react -d
# 配置插件
$ umi config set plugins '[["umi-plugin-react",{"antd":true}]]'
执行完后, umi dev 会自动重启,最终效果如下,
反馈
欢迎大家试用,有任何问题和建议,可以在 issue 上反馈给我们。
参考