Fork me on GitHub

给组件库加个鸡腿

为了工作,也为了长点见识,费心费力捣腾了一个组件库antd-doddle,还是有成长的,总结都写了两篇,收获还是有的,如果你喜欢听故事:

为什么要鸡腿

组件库写出来了,项目也陆陆续续用了,但组里小伙伴用起来,总是要问这个配置怎么写,这个组件怎么用,手把手教学,总不能让小伙伴都去看源码实现吧,所以自己一发狠,用一整晚,写了一篇组件库使用指南,基本就是下图这个风格,示例代码有了,输入输出配置有了,输出效果有了,临时解决了一些问题,但随着业务膨胀,使用人员逐步增多,这种静态文档已经不能满足需求了。
clipboard.png

鸡腿是要解决什么

不是解决解饿,是让生活更富有。这一篇组件库使用指南,该有的内容都有,但问题还是很多:

  • 整个组件库就一个指南,特别长,没有很好的分类,无法快速找到自己的所需;
  • 由于篇幅和实现难度,组件库demo太单一,覆盖面太小;
  • 组件库没有用例,每一次修改,没有demo用例来快速测试,发布了才测试,有比较大的风险,容易造成频繁发版;
  • 自己又想捣腾了;

鸡腿原配方

市面上有很多成熟的方案,推荐比较多的就是Docz,但试了一下,使用起来并没有介绍的那么好用,规范太死板,复杂demo编写实现困难,所以最后还是采用了antd的组件库方案Bisheng,毕竟是完美兼容react,与antd的组件库。
花了一两天折腾了一下Bisheng,发现其还是很好用的,库更多是作为一个路由适配的数据流容器(RenderProps),可配置性很高,UI完全由使用人自己定制(官方称其为主题),库本身提供一个简易的主题Bisheng-Theme-One
只要搞懂了数据长什么样,编写一个展示性组件就显得不是那么难了,从下图看看(图片路由:http://localhost:8090/guide/introduce):
clipboard.png

  • data:是所有的文档信息,和你的文档结构具有强匹配,可以用此数据做文档菜单的数据源;
  • pageData:是当前路由,匹配出的文档内容,也就是你正文要显示的内容;
  • themeConfig:是一个主题定制对象,你想自己定义的变量,都可以在这个对象中增加
  • utils:toReactComponent是暴露出来的一个常用方法
    当然,每一个主题有一个组件路由适配方案,需要在主题根目录下的index.js进行配置,一张图胜所有:
    clipboard.png
    左边的配置会告诉bisheng插件,在匹配到某个路由时去调用相应的组件。组件的具体实现,请参看源码,这里不再一一分析。

鸡腿的味道

总的来说,鸡腿的味道还是很香的,菜单清晰,组件文档一目了然,还配有相应的demo,上两张高清大图感受一下。
clipboard.png
clipboard.png

捣腾到此为止,明天开始专心复习【捂脸】。

-------------本文结束感谢您的阅读-------------