dumi，你崭新的 React 组件开发和文档编写利器！

今天上午，蚂蚁金服插件化的企业级前端框架 —— Umi 3 正式发布；而 dumi 作为 Umi 3 生态的中的一部分，也将正式和大家见面！显然，这个命名已经透露了它和 Umi 的关系。dumi（嘟米）是基于 Umi 打造、为组件开发场景而生的文档工具，用大实话讲，dumi 就是可以用来写文档、官网和组件库 Demo 的 Umi。

一直以来，Umi 都在前端应用研发领域深耕、蜕变，如今已愈发成熟和强大；而在组件库研发领域，纵然我们曾推出了组件库开发、打包工具 father，但在组件库开发的过程中却经常面临编译构建速度慢、报错提示不友好、用 mdx 编写的组件库 Demo『只能看不能用』、想打造一个带 Demo 的组件库官网成本极高等现实问题，dumi 正是为了解决它们而来！dumi 究竟能力几何？让组件库研发即刻开始通常我们准备开发一个组件的，首先要面临的并非打包的问题，而是如何对这样一个组件进行调试：此时只需要执行 dumi dev 命令，将会看到一个漂亮的组件库文档，而这个调试的 Demo 也镶嵌其中：这种新的 Demo 类型使得开发者可以像用户一样利用编辑器的 Code Snippets、ESLint、prettier 等强大功能，再大的 Demo 都能轻松维护。

只要 Demo 超过 30 行，dumi 都建议在外部进行编写，世间如此美好，又何苦在 Markdown 文件中折磨自己。再说用户侧。用户其实就关心一个问题：你这个 Demo 跑得是挺好，但我能不能直接拷贝过去用？为了让消费端能开箱即用，dumi 是这么做的：首先，无论是任何形式的 Demo，包括外部引入的 Demo，用户都可以在文档界面查看到真实的源代码，且都可以选择拷贝或者到

http://

codesandbox.io

中试运行。

其次，dumi 会建议开发者在生产 Demo 时像真实用户一样去做：是的，dumi 基于 Umi 3 打造，Umi 3 的官网基于 dumi 搭建，Umi 生态中又新添一名成员。

最后一个问题，组件开发、编写 Demo 和文档搭建都解决了，打包咋整？打包仍然推荐使用 father-build，与 dumi 一起，为我们组成全流程的组件库开发工具链。dumi 需要你dumi 最初叫 father-doc，很荣幸就算没有做过任何推广，此前也有许多社区的伙伴参与到了 father-doc 的建设中（欢迎迁移到 dumi）；即便从 father-doc 发布第一个 alpha 版开始、到改名为 dumi 发布正式版的今天，dumi 诞生也不过百日出头，仍然是个『宝宝』。