[feature request] Transform Ant Design Pro pages to umi blocks

[yutingzhao1991]

umi block is coming... umijs/umi#1350

需要讨论下如何将 pro 的页面转成 umi 的 block，这样可以让用户使用一个只有 layout 的 pro 脚手架，然后通过 umi block 来选择性的使用 pro 的页面。

[yutingzhao1991]

我这有一个简单的想法，可以开发一个代码转换为 umi block 的工具 umi-block-generate，然后通过这个命令可以把代码转换为 umi 的 block。比如对于 pro 来说我可以运行：

umi-block-generate src/pages/Account/Center/Center.js ---output user-center 这样会自动分析代码以 Center.js 作为页面入口生成物料，不仅仅适用于 pro，也适用于其他项目。

[yutingzhao1991]

同步下方案：

对于 umi 来说，为了能够支撑更丰富，功能更完整的区块，同时也是为了 umi 能够更好的支持能够按照页面更好的组织代码，umi 的插件将会做一个扩展，使得 mock locale 这样的功能能够被直接包含在页面的文件夹下，在这种情况下一个 pro 的区块将会变成如下的结构：

- src
  - index.js
  - index.less
  - mock.js
  - model.js
  - locales
    - zh-CN.js
- @ // 这样可以避免部分公共的内容冗余，不过后续也可以考虑是否也都统一放到 src 下
  - components
  - utils
  - services

这样的一系列区块，将由 pro 的一个工具基于现有 pro 的代码（可能会做一些细微的调整）做自动化的生成。另外对于有的项目（比如 bigfish 的项目），可能习惯将 mock model locale 组织在外层，那么 umi 的 block 提供相应的插件接口供开发使用，使得在分发区块相关内容时可以决定最终的位置。

[yutingzhao1991]

准备写一个工具 umi-block-convertor 来做这件事，https://github.com/umijs/umi-block-convertor

这个工具应该不仅仅能用在 pro 上面，其他项目也应该能够用。当前一个基本的想法是：

通过 umi-block-convertor src/pages/xxx.js 这样的方式来使用。该命令会把 xxx.js 作为区块的主入口，并自动检测依赖将相关资源也放到区块中。

对于 mock.js 这样的资源需要手动配置（或者更简单的方案是自己去做 copy）。比如把 mock/xxx.js copy 到区块下的 _mock.js

[xiaohuoni]

要不要加一个配置表，我现在都在https://github.com/xiaohuoni/umi-antd-pro 这个项目里面做方案测试

[afc163]

应用源码还是都放 src 吧，不然 src 的语义就变得很模糊了。

[yutingzhao1991]

@xiaohuoni 不太明白，配置表是什么意思？和在那个仓库有什么关系？

[yutingzhao1991]

@afc163 是说去掉 @ 目录吗？

[afc163]

我意思是 umi 目录结构下 ，src 是不是应该包括所有前端运行时的代码？

[yutingzhao1991]

@afc163 现在就是这样的，src 外面只有 mock test config 这些。这里的 src 是区块的 src。

[afc163]

👌 我以为是 pro 的 src。

[xiaohuoni]

和“是否考虑添加一个生成纯的脚手架命令”有关系，就是是否需要一个文件，如antd-pro.config.js

setting：true 开启设置
mock：true 开启mock
authorize：true开启权限
...

[yutingzhao1991]

https://github.com/umijs/umi-block-convertor 这个工具可以用了，转换出来的 pro 的区块如下：

分析页：

卡片列表页：

感觉生成去区块代码很不优雅，另外这种方式也不便于后续的升级。有一个想法是：pro 就以区块的方式来开发，新建一个 ant-design-pro-blocks 的仓库，以区块的方式来开发页面。然后在 ant-design-pro 只包含 layout ，但是项目中可以提供一个命令，比如 npm run block:all 来自动将区块下载到项目。

核心的想法就是从一个完整的项目要抽离出区块的复杂度是比把多个区块合并为一个项目要难。

[xiaohuoni]

牛逼👍

[yutingzhao1991]

在 umi 里面先 fork 了一份代码 https://github.com/umijs/ant-design-pro 只包含 layout，另外页面抽取出来到了 https://github.com/umijs/umi-blocks/tree/master/ant-design-pro 这里。

现在 https://github.com/umijs/umi-blocks/tree/master/ant-design-pro 这里面的 block 是通过脚本转换过去的，都勉强能够跑起来。但是离真正可以用的区块还差得远，另外因为 model 名称重复的原因这些区块是暂时不能在 https://github.com/umijs/umi-blocks/tree/master/ant-design-pro 这里面用的（会报 dva 的 namespace 重复）。

所以之前想要通过脚本自动化把项目代码转成区块的想法针对是太天真了，后面需要针对性的做优化，要让区块和外层的布局更好的解耦，要对 https://github.com/umijs/umi-blocks/tree/master/ant-design-pro 进行重构，https://github.com/umijs/umi-blocks/tree/master/ant-design-pro 这个也需要大量的修改。

需要修改的内容大概有：

• 区块解开对全局 model 的依赖（比如对 setting 和 user 这些 model 的依赖）
• 区块相关的 model mock locale 相关文件提取出来
• 想办法去掉区块的 @ 目录，比如使用 umi-request 来移除掉对 utils/request 的依赖，依赖到 components 的内容也要解掉
• 样式的调整，要重新划清楚哪些样式在区块中，哪些在 layout 中

有人要一起搞的吗？后面或许就会合到 ant-design-pro 变成 3.0 了。pro 未来的页面都以区块的形式存在，本身只包含外层的 layout 相关内容，另外 ant-design-pro 这个组件库也会活跃起来。

[yutingzhao1991]

https://github.com/umijs/umi-blocks/tree/master/ant-design-pro/Analysis 这个区块修改了一波，现在在 @ 目录下的全局依赖只有：

这几个了，感觉可以放到 ant-design-pro 中，这样区块就完全独立了。

[yutingzhao1991]

为了能够让后续 Ant Design Pro 的区块更好维护，当前在 umi 仓库中 fork 的 Ant Design Pro 版本将会回到 Ant Design Pro 自己的仓库中，作为 v4 版本的开始。

为了让后续能够更好的保持 pro 的更新和项目的完整性，Ant Design Pro 的项目结构将改为如下的结构：

- config
- src
   - components // ant-design-pro 这个 npm 包对应的代码，所有内容都会发到 ant-design-pro 上
   - pages // 包含所有的区块代码
      - BlockA // 区块的代码，应该是一个完整的可直接运行的页面，不依赖在它之外的任何源代码
         - components
         - _mock.js
         - model.js
         - service.js
         - style.less
         - index.js // 区块代码中直接依赖 ant-design-pro 而不是 components 中的源代码（调试时除外）
      - BlockB
      - ...
   - layouts
   - global.js // 通过 umi-request 的 interceptors 的逻辑来替换当前 util/request.js 中的逻辑
   - global.less 应该只包含 layout 的样式，页面的样式应该独立在页面区块中
- mock // 全局 mock 比如 layout 依赖的 mock
- tests
- e2e
- package.json

为了能够让开发更好的使用 pro，应该提供 ci 工具让开发可以更好的初始化项目代码，ci 工具需要做到的是：

• 选择需要的区块
• 选择是否需要国际化

ci 工具会按照用户的选择去初始化好项目，并且去掉一些项目中没有意义的内容。项目初始化好之后用户也能够通过 umi 的 block 命令方便的添加新的区块到项目中。为了支持直接把 pro 的某一个页面文件夹作为区块，还需要 umi 进行改进，具体参考 ISSUE：umijs/umi#1637 。

[yutingzhao1991]

umi 2.3.0 发布，支持区块，Ant Design Pro 如何使用区块参考 https://www.yuque.com/ant-design/ant-design-pro/lmgc46