Umi: Roadmap for 2.x

[sorrycc]

2.x

Big Features

• [x] 物料市场，分工具和市场两部分，umijs/umi#1350
• [x] umi ui，类似 vue ui 和 angular console，业界方案已经比较成熟，很多可以拿来用，我们可以做得不一样的是可以结合路由和数据流来做，支持插件扩展，umijs/umi#272，umijs/umi#1415
• [x] 支持组件开发，通过 umi library 露出，提供 dev, build, publish 等命令，基于 rollup，storyboook、docz 等，更多详见 umijs/umi#628，umijs/umi#1550
• [x] SSR，优先级较低，内部需求少，但对外是一个大 feature，保持关注和调研，umijs/umi#1330

dev/build 提速

• [ ] 提供 umi-plugin-externals，除了配置 webpack 的 externals
• [ ] 考虑 noParse 和 uglifyjs 的 exclude 等，使 umi 的 build/dev 速度上一个台阶
• [ ] 把 1.x 的按需编译加回来，对于一些极庞大业务会有用，比如语雀和云凤蝶
• [x] 支持 tree-shaking，一直以为是支持的。。umijs/umi#1364

部署和使用场景

• [ ] 支持运行时扩展路由，包含组件、model（如果开启了 dva）等，需提供一个例子，扩展的文件打包成 umd 格式，比如 umijs/umi#427
• [ ] 提供 umi-plugin-egg，更方便地接入 eggjs

路由

• [x] 支持路由解耦，即 html 文件不依赖 url，随便放哪都能访问，简单实现是用 MemoryRouter，复杂实现需要移除 react-router 和 react-router-dom, umijs/umi#1383
• [ ] 支持多 layout，比如 umijs/umi#832
• [ ] 路由识别可以更智能一些，自动识别 pages 下的文件是否为 react component，不是的话直接排除掉，比如 dva 的 model、service、utils 等，无需额外配置

性能

• [ ] 支持 Prefetch

dva

• [ ] 支持配置 option.disableModelDynamicImport，允许开了 dynamicImport 时也全量加载 model，避免 dev 和 prod model 加载不一致的问题
• [ ] 改造 model 加载方式，dva 的 model 等处理成 route 上的配置，便于运行时扩展

Misc

• [x] 支持 config.cssPublicPath 配置，对应 extract-text-webpack-plugin 的 publicPath 配置，解决比如 umijs/umi#1357 的问题，#1409
• [ ] 通过 umi-plugin-storybook 整合 storybook，通过 umi storybook 启动
• [ ] 完善 umi generate，目前只有 umi g page
• [ ] 默认内置埋点，捕获使用率、命令行出错、umi dev 出错等，分级，比如 log 和 error，允许关闭，区分是否阿里内部用户
• [x] 提供 umi-plugin-eslint，把 1.x 的 eslint 校验加回来，https://github.com/umijs/umi/issues/1371#issuecomment-434586670
• [x] 支持在 page 下写 mock，这样 mock、model、route 就可以自成一体，比如 mock 解析时包含所有 src/pages/**/__mock__/*.js
• [ ] 进一步完善 pnp支持，比如 dll 支持 pnp，让 ant-design-pro 可以用 pnp 跑，create-umi 通过 --pnp 支持
• [ ] node_modules 考虑走 babel transform，然后 @babel/preset-env 的 polyfill 用 usage，可进一步减少尺寸，同时完美地解决 node_modules es6 代码的 uglifyjs 问题
• [ ] 和 react hooks 的结合，比如 useRouter
• [x] umi serve，serve dist/ 下的静态文件，但包含 mock 功能
• [x] 锁定全部三方依赖版本，定期升级
• [ ] umi-plugin-nprogress
• [ ] 针对 ant-design-pro 的场景，试验全量打包和秒开提速。群里有讨论如何为打包提速，webpack 作为通用方案能提的其实已经有限，由于 babel 和 uglifyjs 的存在，不太可能有质变。但针对一些垂直场景还是可以探索一下的，比如 antd-pro、h5 等。比如 antd-pro，可以考虑全量打包依赖，然后用 systemjs 处理项目文件，小程序那边已实现，可以结合考虑一下，最佳情况可以实现秒开，但限制也比较明显。
• [x] create-umi 支持 typescript
• [ ] 更智能的 css modules 支持方式，import './a.css' 不走 css modules，import styles from './a.css' 走 css modules，#1417
• [ ] 升级 uglifyjs-webpack-plugin 到 2

3.x

有 break-change 的改动放这里，无实际开发计划。

• 配置文件 (.umirc.js, config/config.js) 里寻找路径有点混乱，比如 route component 是从 page 开始找的，又比如 theme 字符串是从根目录开始找的

持续做

• 文档完善
• 完成视频教程
• 用例补充

参考

• umijs/umi#628
• https://github.com/sorrycc/todos/issues/238#issuecomment-419618621
• https://github.com/sorrycc/todos/issues/196

[xiaohuoni]

关注

[xiaoxiangmoe]

umi component 的一个目的是支持 monorepo 开发吗？

.
├── README.md
├── lerna.json
├── package.json
├── packages
│   └── @myscope
│       ├── my-app-components  # 使用 umi component 编译
│       ├── other-libs         # 自己配置 rollup 编译
│       └── my-app             # 使用 umi 编译，业务强耦合的代码
└── yarn.lock

其中业务强耦合的代码放在 my-app-component ，使用 umi component 编译。
与业务脱耦合的可复用的组件/代码等，放在 my-app-components 和 other-libs ，甚至可以单独发布。
也可以引入一些物料市场内的库，直接放在 @myscope 目录下，稍作修改被其余库引入。

[xiaoxiangmoe]

顺便提一下，umi component 是不是可以改成 umi library 啊，因为非组件的库，比如 hooks 之类的，还有其余的一些很纯粹的工具函数库，也可以用它打包。

我们目前可以考虑使用 https://github.com/developit/microbundle

[Leonard-Li777]

希望能增加是否使用内置antd的选项，有的项目是用的antd2.x。

另外感觉即使开启了modules: false ， antd的tree-shaking还是没生效

[xfields]

sorrycc/todos#238 这个链接 404 了

[devmsg]

关注

[denggy]

1.既然umi是内置dva的 那么dva原生的方法 是否应该暴露出来 （包括dva生命周期是否可以覆盖）
2.目前umi 的 2.2版本 在路由和layout上感觉还是有些单一( 比如不支持动态插入路由 还有默认的路由约定感觉很鸡肋 因为没有和layout关联起来)
不过在总体思路和编辑速度上比pro1.x 的roadhog那版强太多了 期待 @sorrycc 继续发力

[shengbeiniao]

目前UMI的目录是约束的，不适合monorepo开发，例如yarn的workspace，或者官方能提供示例

[xiaohuoni]

Misc

• [x] create-umi 支持 typescript
  https://github.com/umijs/create-umi/pull/17

[JevonYang]

请问，以后版本中考虑支持小程序（微信/支付宝/百度）么?

[anshengme]

SSR急需，希望可以支持

[ybning]

SSR +1

[ghost]

Tree shaking +1

[ghost]

• SSR +1

[murrayee]

期待useEverything

[ManuRodgers]

SSR+1

[huangshunping]

SSR+1

[Jeepeng]

SSR+1

[liresky]

什么时候能把那些旧的不维护的依赖包升级上一部分，现在看着都不敢用猛用啊，怕冲突

[sorrycc]

@liresky 那些包？

[leohxj]

物料和组件的概念是如何定义的？他们的粒度和关系是如何的？

这里提到的物料就是 umi block 吧， 简单的理解它就是可复用的代码块吧？
组件是否就是构成 block 的元素？它和 umi 可以没有关系吧。

[xiaohuoni]

https://www.npmjs.com/package/umi-plugin-nprogress

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.