Ant-design-pro: V4 branch init

[yutingzhao1991]

在 Ant Design Pro V4 版本中，我们将要通过区块来组织页面，并且需要能够让开发可以通过 cli 工具来初始化 pro 的项目，能够灵活的选择初始化的页面，以及是否使用 TypeScript 等。不再像以前那样通过直接 clone ant-design-pro 的代码来使用，这就意味着 V4 版本的代码组织方式也将有所不同。需要讨论下后面怎么组织 V4 的代码。

当前有两个初步的方案：

方案 1：

• ant-design/ant-design-pro 中只包含 layout 的相关代码，基于之前 fork 到 umi 的版本 https://github.com/umijs/ant-design-pro
• 新建 ant-design/pro-blocks 的仓库，将 https://github.com/umijs/umi-blocks/tree/master/ant-design-pro 迁移到新的仓库维护

方案 2：

• ant-design/ant-design-pro 中包含 layout + 区块的全部代码
• 通过脚本把 layout 和 区块拆开同步到 umi 现在的仓库中

另外还有其他需要考虑的问题：

• components 下面 ant-design-pro 这个包的代码放哪里，是否和 layout 放在一起，如果放在一起那么怎么在初始化项目的时候把它抽离出去
• 如果要同时支持 TypeScript 和 ES6 的版本，基于 TS 的代码编译成为 ES6 的，那么 ES6 的代码放哪里？
• 如果区块放到 ant-design 中直接维护，那么 umi-blocks/ant-design-pro 的区块将要删除，umi block list 这个命令就再也看不到 pro 的区块，这个要怎么解决？

[afc163]

方案 1 的话，如何调试区块。

[yutingzhao1991]

方案 1 的话，如何调试区块。

最简单的方案，区块独立调试。单个区块自己调试，在区块下面运行 umi dev。区块应该是和 layout 解耦的。

[chenshuai2144]

方案 1 会清晰很多

[chenshuai2144]

大部分情况下使用 pro 首先要删除 pages 下面的文件，我们如果在 pro 的中提供一个命令，可以读取配置，拉下来区块，初始化基于 pro 的脚手架就会变得非常简单

blocks: [
 'login'
]

[yutingzhao1991]

大部分情况下使用 pro 首先要删除 pages 下面的文件，我们如果在 pro 的中提供一个命令，可以读取配置，拉下来区块，初始化基于 pro 的脚手架就会变得非常简单

这个是肯定的，和怎么组织 pro 的代码没有直接关系，不管我们怎么管理 pro 的代码，最终对于用户来说应该都是通过 cli 工具来灵活的初始化项目。

[afc163]

umi block fetch

[yutingzhao1991]

umi block fetch 这个是要干嘛的？添加一个区块应该就是 umi block add xxx。

[afc163]

拿到 list 里所有的区块，依次 add 。

[chenshuai2144]

形成一个规范，有个地方可以配置默认的区块文件，add的时候给数组push一个

[xiaoxiangmoe]

方案一的确清晰很多，而且有利于大家 fork 出来修改，与其他技术栈组合，并给大家做展示。

umi/create-react-app，js/ts ，redux/mobx/dva/hooks 等技术栈的组合，方案一代码量少，更易做。

---

话说区块如果会当 package 打包发布，调试区块不能用 npm link 吗？

---

顺便提个小问题，如果使用方案一，那么 npm 上的 ant-design-pro 这个 package 是由 ant-design/pro-blocks 构建出来的吗？

[yutingzhao1991]

拿到 list 里所有的区块，依次 add

这个感觉不应该 umi 做，应该是 pro cli 来做。

[yutingzhao1991]

话说区块如果会当 package 打包发布，调试区块不能用 npm link 吗？

调试方案确实是可以改进的，比如可以写一个 umi 插件，把某一个路由直接指向一个区块的路径。

顺便提个小问题，如果使用方案一，那么 npm 上的 ant-design-pro 这个 package 是由 ant-design/pro-blocks 构建出来的吗？

不会 ant-design-pro 还是和现在一样是组件，区块直接放在 git 就行，不需要发布为 npm 包。

[yutingzhao1991]

@sorrycc @zombieJ @yesmeck @xiaohuoni 你们有什么想法没？

[a854363956]

关于TypeScript 和 ES6 不建议同时支持,建议只支持TypeScript 或者只支持ES6 ,如果在一个项目里面既写TS又写es会不会感觉很怪异? 如果一定要支持,是否可以维护一份ES的分支,主要支持TS? 以分支的方式进行维护,这样项目的结构就很清晰了

[yutingzhao1991]

@a854363956 同时支持的意思不是说一部分是 ts 一部分是 es，就是指支持两种方式的完整的代码。

[a854363956]

@a854363956 同时支持的意思不是说一部分是 ts 一部分是 es，就是指支持两种方式的完整的代码。

明白了,理解错了..

[yutingzhao1991]

决定使用方案一，另外其他几个问题的方案如下：

components 下面 ant-design-pro 这个包的代码放哪里，是否和 layout 放在一起，如果放在一起那么怎么在初始化项目的时候把它抽离出去？

比较通用的组件未来会抽取到 antd 中，其他无法抽取的直接放在 block 中。

如果要同时支持 TypeScript 和 ES6 的版本，基于 TS 的代码编译成为 ES6 的，那么 ES6 的代码放哪里？

放到单独的分支中。

如果区块放到 ant-design 中直接维护，那么 umi-blocks/ant-design-pro 的区块将要删除，umi block list 这个命令就再也看不到 pro 的区块，这个要怎么解决？

这个不重要，后面再看看。

[yutingzhao1991]

pro v4 branch: https://github.com/ant-design/ant-design-pro/tree/v4

pro-blocks repo: https://github.com/ant-design/pro-blocks