dumi 1.0 是今年的 3 月 2 日发布的,到现在已经过去了 304 天。
在这期间,dumi 已经成为 700+ 社区项目的组件库研发/文档编写工具,将近 10k 的 npm 包月下载量,收到了近 300 的 issue 反馈、150+ 的 PRs,有了数不清的不断帮助 dumi 做改进和优化的小伙伴,感谢大家对 dumi 的支持;
在这期间,通过不断地收集反馈、规划功能、迭代研发,我们也准备好了全新的 dumi 1.1 版本,在 2021 年的前夕,和大家分享。
核心升级
新功能:
- ???? 移动端组件研发
- ???? 自定义主题
- ???? 组件 API 解析
- ???? 与 Umi 项目集成
- ???? 更丰富的文档编写语法
- ???? 资产数据化能力
改进:
- ???? 单测覆盖率从 57% -> 93%,更稳健
- ???? Markdown 解析核心逻辑重构,并升级 parser 到 micromark,JSX 输出更稳定
- ???? 缓存及编译策略优化,启动及热更新大幅提速
移动端组件研发
在全新的移动端模式下,dumi 为开发者提供手机模拟框用于呈现组件,且基于 umi-hd 提供了一套高清渲染方案,来看看移动端模式的呈现效果:
访问 dumi - 移动端组件研发 了解更多。
自定义主题
当一个工具满足了功能诉求,个性化必然会成为永恒的旋律。dumi 这次不仅带来了主题自定义能力,还让『自定义』这件事能循序渐进:
- 支持主题局部复写:如果 dumi 的默认主题能基本满足我们的需求,但我们在正文区域全局添加一些控件,比如『一键反馈』按钮,那么可以对 dumi 默认的 layout 进行局部复写
- 支持扩展 Markdown 标签:dumi 已经扩展了诸如 Badge、Alert 等 Markdown 标签,并且也支持开发者快速扩展自己的 Markdown 标签,例如创建一个全局 Feedback 组件用于展示反馈信息
- 支持本地/主题包双模式:开发者可以在项目中快速创建本地主题,也可以发布单独的 npm 主题包,提供给其他 dumi 项目使用
dumi 的移动端组件研发就是通过 dumi-theme-mobile 这个自定义主题包实现的,也想动手自定义一把?访问 dumi - 主题开发 了解更多。
组件 API 解析
我们可以通过 JS Doc 注解 + TypeScript 类型定义的方式实现组件 API 表格的自动生成了!
只要我们使用 TypeScript 编写组件、完善类型定义,并添加少量注释,dumi 就能帮我们识别其中的类型定义,并输出为 API 表格,例如我们写了这样一个组件:
在 Markdown 中使用 <API /> 内置组件即可渲染出对应的 API 表格:
访问 dumi - 组件 API 自动生成 了解更多。
当然,API 自动生成并非一件行云流水的事,因为现实研发中组件的属性的复杂度可能会非常惊人,需要大家一起参与优化,如果在 API 自动生成特性使用过程中遇到问题或有任何 idea,请前往 API 自动生成讨论贴 反馈。
与 Umi 项目集成
除了独立的组件库以外,我们大多数的项目还会有自己的内部组件,这些内部的组件库管理通常是一个很头疼的问题,既不需要发布单独的 npm 包,又需要进行迭代、更新、说明、交接;为了让项目内部组件库管理这件事变得更加轻松,dumi 推出了 Umi 项目集成模式:
- 相互隔离:所有 dumi 文档都会集中在 /~docs 路由下,与原项目相互隔离、互不干扰,可以理解为标准 dumi 文档都加了一个特定路由前缀,也包括用户的导航和菜单路由配置
- 不影响生产:仅在 NODE_ENV 是 development 时集成,不影响项目的生产构建
- 可单独构建:如果需要单独构建文档做部署,可执行 umi build --dumi,即可得到一份非集成模式的 dumi 站点产物,--dumi 在 umi dev 命令下也是可用的
访问 dumi - Umi 项目集成模式 了解更多。
更丰富的文档编写语法
在 1.0 的基础上,dumi 又新增了许多的文档编写语法,可以帮助我们更快、更好地编写文档和 demo:
- 嵌入其他 Markdown:dumi 对 HTML 默认的 embed 标签做了扩展,可以在一个 Markdown 文档中嵌入另一个 Markdown 文档的部分或全部内容,了解详情
- 开放内置组件:可使用 Badge、Alert 内置组件丰富文档内容,未来还会增加更多内置组件,了解详情
- 调试型 demo:可创建仅开发模式下可见的调试 demo,了解详情
- 为 demo 启用 iframe 模式:可简单配置 iframe: true 将 demo 渲染在 iframe 内,更适合页面型组件,了解详情
资产数据化能力
如何理解资产?从开发者视角狭义的理解,只要是生产出来可以帮助下游提效的实体,都可以称之为资产,比如组件、文档、组件 API、组件 demo 等等。
我们在组件研发的过程中,无时无刻不在创建着资产。发布的 npm 包自然是资产,但编写的 TypeScript 类型定义、精心准备的组件库 demo 也都是资产,现在只需一行命令,即可将 dumi 与开发者共同完成的资产数据化,这份数据可以跟随 npm 包迭代、发布,进而流转给下游工具使用。
例如,将资产数据交由 Umi UI 进行消费,开发者可通过 Umi UI 将组件 demo 直接插入到项目中使用:
这只是目前的一种数据消费方式,如果你所处的团队还有其他生产力工具,不妨试试用资产数据进行连通、帮助研发提效。
访问 dumi - UI 资产数据化,了解更多关于资产数据流通、消费的信息。
本次升级完全兼容 1.0 版本,如果你已经在使用 dumi、那么只需要更新依赖即可;如果你还没有使用过 dumi,请访问 dumi 官网,开启全新的组件研发体验:d.umijs.org
感谢
感谢 @xiaohuoni、@mortalYoung、@xrkffgg、@lbwa 一起完成 dumi 1.1 的研发;
感谢 四十多位 不断帮助 dumi 做改进和优化的小伙伴:
感谢在 GitHub issue、钉钉群、微信群提出反馈、建议及解决方案的朋友们;
有了大家的共同参与,dumi 才得以成长;未来仍然需要大家的共同参与,dumi 才能继续成长,期待在 GitHub 与你相遇!
打个广告
一年一度的 SEE Conf 即将启程,本次会议也会包含我们对资产工程化链路的探索和实践,欢迎参与。戳图片了解详情: