今天上午,蚂蚁金服插件化的企业级前端框架 —— 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 诞生也不过百日出头,仍然是个『宝宝』。