单独组件_dumi 1.1 发布，你更好用的组件研发利器！

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 提供了一套高清渲染方案，来看看移动端模式的呈现效果：

image

访问 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 表格，例如我们写了这样一个组件：

image

在 Markdown 中使用  内置组件即可渲染出对应的 API 表格：

image

访问 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 直接插入到项目中使用：

image

这只是目前的一种数据消费方式，如果你所处的团队还有其他生产力工具，不妨试试用资产数据进行连通、帮助研发提效。

访问 dumi - UI 资产数据化，了解更多关于资产数据流通、消费的信息。

---

本次升级完全兼容 1.0 版本，如果你已经在使用 dumi、那么只需要更新依赖即可；如果你还没有使用过 dumi，请访问 dumi 官网，开启全新的组件研发体验：https://d.umijs.org

感谢

感谢 @xiaohuoni、@mortalYoung、@xrkffgg、@lbwa 一起完成 dumi 1.1 的研发；

感谢 四十多位 不断帮助 dumi 做改进和优化的小伙伴：

image

感谢在 GitHub issue、钉钉群、微信群提出反馈、建议及解决方案的朋友们；

有了大家的共同参与，dumi 才得以成长；未来仍然需要大家的共同参与，dumi 才能继续成长，期待在 GitHub 与你相遇！

打个广告

一年一度的 SEE Conf 即将启程，本次会议也会包含我们对资产工程化链路的探索和实践，欢迎参与。戳图片了解详情：

image