发布 umi 2.3，区块

[sorrycc]

English version | 中文版

重要更新

• 新增 umi block 命令和区块市场
• 升级 babel、webpack 等依赖到最新，并锁定版本，#1695，#1602，#1543
• 新增 umi-request 请求库
• 支持在 page 目录下通过 _mock.js 声明 mock，通过 locales 组织多语言，便于把 mock、国际化、model、service、compoent 和路由组织到一起，#1503，#1513
• 新增 umi inspect 命令，用于检查 webpack 配置等
• 新增 umi config 命令，用于通过命令行修改配置
• 更新 [email protected]，支持创建 ant-design-pro 空壳脚手架，然后通过 umi block 一个个添加页面

umi block

不知大家是如何使用 ant-design-pro，我们自己有项目的使用方式是整个 clone 下来，然后把不需要的一个个删掉。先不评价这种方式是否合适，我们这里探索一种反着来的使用方式，即先有一个 ant-design-pro 的空壳，然后一个个页面往上加。

umi block（区块）类似 ice，可以让我们在项目里快速添加页面。但与 ice 不同的是，umi 的 block 是一个完整可子运行的模块，包含路由、组件、mock 数据、国际化文本，如果有用 dva，还可以包含 model 和 service 等，所以借此，大家也可以有另一种组织代码的方式。

视频介绍

由 @yutingzhao1991 录制，可以在 bilibili 或 youtube 看到。

5 分钟入门 umi block

先创建项目。

# 创建项目，选 ant-design-pro
$ yarn create umi

# 安装依赖
$ yarn

# 启动项目
$ yarn start

再新开命令行窗口安装区块。

# 列表，看看有哪些区块
$ npx umi block list

# 新增区块
$ npx umi block add ant-design-pro/Monitor

其他更新

• 修改 umi/locale 引用为 umi-plugin-react/locale，解决 typescript 和 eslint 的问题，#1716
• 添加 umi-example-monorepo，支持分包组织代码
• 支持 terserjs 作为 minifier，#1667
• 修复 mock 里 method 为 delete 时 body 丢失的问题，#1706
• 修复 /404 路由配置 redirect 后出错的问题，#1538
• 改进 types 定义，#1519
• cssModulesExcludes 支持正则，#1511
• umi-plugin-react 的 title 配置支持多语言，#1482
• 修复某些网络环境下 undefined network 的问题，#1474
• 修复 umi-test 某些情况下使用 typescript 不正常的问题，#1437
• 支持直接 import from umi，#1493
• locale 添加 formatHTMLMessage 方法，#1664

升级到 [email protected]

如果你是用 umi@2，[email protected] 不包含 break change，可直接升级；如果用 [email protected]，请参考 https://umijs.org/zh/guide/migration.html 升级。

[sorrycc]

English version | 中文版

Important Updates

• Add umi block command and block market
• Upgrade babel, webpack, etc to the latest, and lock version, #1695, #1602, #1543
• Add umi-request library for request
• Support the declaration of mock files and i18n files in pages directory，#1503，#1513
• Add umi inspect command to inspect webpack configuration, etc.
• Add umi config command to modify configuration via command line
• Release [email protected], support the creation of empty ant-design-pro, then add pages one by one via umi block

umi block

I don't know how everyone uses ant-design-pro. The way we use in my own projects is to clone the whole ant-design-pro and then delete what we don't need. Let's not evaluate whether this method is appropriate. Let's explore a way to use it backwards, that is, first have an empty shell of ant-design-pro, then add pages one by one.

umi block is similar to ice, allowing us to quickly add pages to our project. But unlike ice, umi's block is a complete self-running module that contains routing, components, mock data, and i18n scripts. If you're using dva, you can also include model and service. This is also another way to organize your code.

Video Introduction

Recorded by @yutingzhao1991, available at bilibili and youtube.

Get startted umi block in 5 minites

Create a project first.

# Create project via `create-umi`, choose ant-design-pro
$ yarn create umi

# Install dependencies
$ yarn

# Start the project
$ yarn start

Then open another command line window to search and install the block.

# list blocks, checkout which blocks are there
$ npx umi block list

# Add block
$ npx umi block add ant-design-pro/Monitor

Other Updates

• Modify the umi/locale reference to umi-plugin-react/locale, resolve the problem with typescript and eslint, #1716
• Add umi-example-monorepo, support organize your project with sub modules
• Support terserjs as minifier, #1667
• Fix the problem that the body is missing when the method is delete in the mock, #1706
• Fixed an issue with /404 routing configuration redirect, #1538
• Improved types definition, #1519
• cssModulesExcludes supports regular, #1511
• umi-plugin-react's title configuration supports multiple languages, #1482
• Fixed an issue with undefined network in some network environments, #1474
• Fix umi-test problems with typescript, #1437
• Support import from umi directory, #1493
• Add formatHTMLMessage method to umi-plugin-locale, #1664

Upgrade to [email protected]

If you are using umi@2, [email protected] does not include break change, you can upgrade directly; if you are using [email protected], please refer to https://umijs.org/en/guide/migration.html to upgrade.

[accwill]

handsome boy

[jinrichardJIN]

👍赞

[xiaohuoni]

👍

[alexsaurora]

cool boy!!!

[iceberg211]

什么时候能和大佬一样优秀

[Easyobj]

赞

[TeaEra]

👍👍👍

[xyzdbb]

👍

[boxcc]

👍

[MasonTao]

👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍

[hqwlkj]

大赞 👍👍

[yijiang0311]

great!!!

[wangyazhen]

OK good

[ghost]

umi ui在这版能用吗？

[ybning]

666！赞一个！

[okoala]

awesome~ ant design team guys

[clock157]

gooooooooood!

[afc163]

The upcoming Ant Design Pro V4 will be lighter, more detachable and more configurable with umi block: ant-design/ant-design-pro#3143

[zywcode]

赞

[0xZXDX]

👍

[dkvirus]

功能很赞👍，但实际业务使用中还有几个问题需要优化：

1. block 地址

现在引入一个 block，需要知道 github 地址/gitlab 地址/本地地址，而且一个 block 仅仅是一个页面，试问：每次引入区块还得登录 github 查找路径？另外，公司内部有的不会将代码上传到 github 上，也有还在用 svn 没搭建 gitlab 的，这部分用户就没法享受到 umi 区块的福利。

如果可能的话可以支持 ：

// zzz 类似于 npm 包名那种
$ umi add block user

// 对于一个公司下有很多包，可以添加命名空间 @xxx，这一点类似 @babel/core
$ umi add block @antdpro/user

2. 批量导入区块

目前只能一个个的导入区块，原因是 Block 限制了区块的目录结构，这一点完全没问题，但可以稍微扩展一下。

正常后管系统都有 RBAC 功能菜单（用户、角色、组织结构等），希望一次性导入多个区块。换句话说，不是将 user 或者 role 看成一个区块，而是将 rbac 这个东东看成一个区块，事实上还是导入一个区块。对于区块目录结构可以额外支持如下：

|-- rbac
  |-- user
    |-- src
      |-- index.js
      |-- model.js
      |-- service.js
  |-- role
    |-- src
      |-- index.js
      |-- model.js
      |-- service.js

这种情形也是相当有必要的。

普通区块只是一个页面，功能相对独立。

但实际业务并不是这样的，操作 用户管理 时，新增一个用户可能需要选择所属机构(实际往往如此)，这需要在 用户管理 里用到 机构管理 的 service.js，so，可以将 系统管理 (这里仅举例)作为一个整体。

|-- 系统管理
  |-- 用户管理
  |-- 角色管理
  |-- 机构管理

这么一来，区块感觉定位为一级菜单更加有包容性。一个一级菜单是一个区块，而不是一个页面是一个区块。一级菜单下面的二级菜单之间 maybe 会有交流（像用户与机构，用户与角色，单独引一个会出问题），但不可能出现这个一级菜单下面的子菜单去请求另外一个一级菜单下面的子菜单。尽可能保持业务功能独立性而不是页面的独立性。

[yutingzhao1991]

@dkvirus

1. block 地址的问题：当前可以用 umi block list 来查看官方仓库的区块，另外地址可以不需要完整的，默认为到 umi-blocks 官方仓库去找。如果是需要自定义一个区块的规则，可以开发 umi 插件来支持，umi 区块也暴露了很多方法可以做扩展。比如你的需求就可以用 _modifyCommand 来支持。

2. 当前区块对应的是一个页面，那实际上这个页面也是可以有自己的子页面的，直接嵌套就行。对于约定式路由没问题，但是配置式路由可能暂时还需要自己改一下路由配置。不过我们推荐还是一个区块对应一个页面会更灵活一点，尽量保证区块的独立性。在实际项目中如果要嵌套的话可以通过指定 path 参数，这样它会按照 path 来把区块的内容放到指定的目录下。

[WaterEye0o]

👍

[onpaik]

👍

[dkvirus]

@yutingzhao1991 大佬，中午刚看完你的视频，一段简短的视频抵得上巴拉巴拉敲一堆字，哈哈 🤝

umi block list 来查看官方仓库的区块

重点是公司，尤其是金融类公司是不让将代码上传到 github 的，更别提提交到 umi 区块的官方仓库。

区块的规则，可以开发 umi 插件来支持

插件实现区块的规则，我没有太明白这句话的含义，是指 umi add block @antdpro/user 这种方式吗？

写插件就是不断造坑，再填坑。 —— 某伟(lu)人(xun)

如果这个需求很普遍，为何官方不直接实现了，减少下面人造坑呢？

推荐还是一个区块对应一个页面会更灵活一点，尽量保证区块的独立性。

个人认为，block 社区最终要做到的成果是：只要是安装到本地的 block 都要是功能正常无错误的，而不是安装的 block 一运行就报错，这会降低使用者的信心。

对于功能完全独立的 block，随意上传 block 或者下载 block 完全没问题。

对于功能有关联的 block，比如 user、role、org，就压根不能允许单独上传 block，使用者（下载 block 的人）并不能理解上传者的意图（这三个 block 要一起下载也有用），使用者只下载了 user block （因为 block 社区允许单独上传有关联关系的 block）在本地运行发现运行错误，只会喷这是个有问题的 block。

user/role/org 这些大伙还比较熟悉，对于之后 Block 社区上传的新的 block，仅仅通过命名谁有知道哪些区块有关联关系，so，个人认为这是在埋坑。

---

最后谈一谈 Block 想要解决的问题，个人认为是减少业务功能重复化，大白话：复制页面。但这种减少重复化并不完全，可以再升级一波。

需求：同时维护多个中后台系统时，每个系统都有 用户管理、角色管理等基本功能；

Boss：因为 umi 有了区块，可以在五分钟内给每个系统都添加这些基础功能。完美~~

After a few days.......

需求：所有系统中 用户管理 需要新加个 导出用户 功能

开发：此时需要在每个系统中都要手动新增这个功能

那个谁：明明是通用的功能，聪明的做法应该是只修改一个地方，在每个系统中更新底层依赖就应当完美解决这个问题才是。

如果能将 block 下沉到底部依赖，那就真的完美了。

[yutingzhao1991]

@dkvirus

区块的规则，可以开发 umi 插件来支持

因为 umi 是开源的，所以如果你自己维护的区块的源是内部的话，区块名称对应到区块实际地址的规则是没有办法在 umi 中实现的，但是你可以通过 umi 提供的插件的接口来开发插件，使得当执行 umi add @yourflag/xxx 之类的时候能够把 @yourflag/xxx 转换为具体的区块的地址。不过我推荐的另外的一个做法是如果有内部需要维护的区块，那么可以自建一个区块市场，提供内部区块浏览和对应添加区块的命令即可。

最后谈一谈 Block 想要解决的问题

我觉得你这个可能不是区块要解决的问题，更像是通用的组件，或者 umi 的插件。区块添加到项目中就变成项目的一部分了，后续是可以被随意修改的，无法更像升级维护。你的这些需求其实可以做成组件或者 umi 插件来实现，然后去更新组件和 umi 插件即可。

[dkvirus]

@yutingzhao1991 thx guide.

[nnqiu]

可以创建空壳ant design pro了，真好

[noyobo]

git clone xxxx --depth=1 ./ 可能可以加快，截图中等了7分钟。只能终止了。

自己敲命令 20 秒可以完成。

[yutingzhao1991]

@noyobo 好建议！提个 PR？

另外本地临时要用但是 clone 不下来的话可以 add 后面跟本地的一个地址。