给组件库加个鸡腿

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

• 从 dist 到 es：发一个 NPM 库，我蜕了一层皮
• 从 24m 到 1m, 一个 react+antd 后台系统构建打包历程
• 组件文档地址

为什么要鸡腿

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

鸡腿是要解决什么

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

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

鸡腿原配方

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

• data：是所有的文档信息，和你的文档结构具有强匹配，可以用此数据做文档菜单的数据源；
• pageData：是当前路由，匹配出的文档内容，也就是你正文要显示的内容；
• themeConfig：是一个主题定制对象，你想自己定义的变量，都可以在这个对象中增加
• utils：toReactComponent 是暴露出来的一个常用方法

当然，每一个主题有一个组件路由适配方案，需要在主题根目录下的 index.js 进行配置，一张图胜所有：

左边的配置会告诉 bisheng 插件，在匹配到某个路由时去调用相应的组件。组件的具体实现，请参看源码，这里不再一一分析。

鸡腿的味道

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

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