給組件庫加個雞腿

爲了工做，也爲了長點見識，費心費力搗騰了一個組件庫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，上兩張高清大圖感覺一下。

搗騰到此爲止，明天開始專心複習【捂臉】。