给组件库加个鸡腿

为了工做，也为了长点见识，费心费力捣腾了一个组件库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，上两张高清大图感觉一下。

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