零、前言
美團有樂高, 京東有通天塔,阿里有飛冰,大廠都在嘗試用自動化工具減少人工,看完這一篇,考慮給你的團隊搭建一套自動化開發工具吧!
一、背景
筆者所在公司並非大廠, 發現一些痛點.
1.前端研發跟隨業務, 不同部門技術棧五花八門, 同崗位支援困難.( react | vue | seek.js),
2.規範不統一, 跨部門開專案, 編輯器一片紅海.standard Airbnb google.
3.元件複用困難, 過程蠻荒, 開發低效.基本停留在翻專案, 找程式碼, ctrl + c, ctrl + v , 再一通亂改.
二、開發思路
利用基礎模板 + 物料(元件) 快速生成專案, 再二次開發
筆者在寫react專案時, 用過vscode的外掛generateReactComponents, 感覺十分方便, 考慮能不寫成一整套耦合業務的元件, 高效複用快速生成專案? 用了大概3個月的閒暇時間做出目前的工具, joao-cli, 可達到如下效果.(錄製的公司內部版, 開源版指令為joao)
joao主要用於vue專案, 如果你的專案基於react實現,建議使用阿里官方維護的fusion.design,並且阿里平臺已經打通了物料庫與UI層.
完成一個腳手架+物料庫的大體思路是:
1.首先建立一個空專案
安裝部門習慣用的,UI元件庫, eslint, 加上業務線自己的工具庫,字型庫,等等...高度耦合業務即可.
2.建立物料庫
再建立一個倉庫, 開發人員均可以參與, 固定規範, 維護通用元件, 可以在筆者github專案根目錄的material資料夾中檢視示例.
這裡是物料庫,內涵官網程式碼+物料庫程式碼(物料不多僅供參考)
3.完善模板拉取,物料剝離與安裝的工具
這就是joao-cli做的事情, 大家可以嘗試用node寫一套自己的, 利用commander + git clone可以完成程式碼拉取,抹掉.git
拉取物料庫的物料,不管是components, 還是modules, 利用node的fs進行檔案讀取.然後安插到新專案的指定位置, 可以通過一些佔位符完成私有屬性的替換,筆者這裡參照vscode的generateReactComponent, 用__className__為預設佔位符,替換掉了modules的name.
最後利用git的coreconfig.sparse-checkcout完成物料庫指定目錄的更新.
由於node內容較多, 這裡不再贅述, 這裡挖一個坑 以後會完成joao-cli 的node教學,程式碼其實很簡單, 甚至可以說low, 直接看不難.
三、joao-cli一些說明.
// 安裝joao-cli
npm install joao-cli -g
// 初始化專案
joao init
// 當前物料檢視
joao check
// 物料庫更新(從github物料庫拉取)
joao update
// 元件安裝 components 在專案根目錄使用
joao add -c 名稱A 名稱B ...
// 模組安裝 (頁面級內容) 在專案根目錄使用
joao add -p 隨便起個頁面名
複製程式碼down一個自己玩玩大概就明白怎麼回事了.
四、跟阿里飛冰, 美團樂高對比分析
首先筆者在寫完此工具後, 去研究了一下大廠的成品專案,
美團樂高的思路好像是跟後端一起工程化, 很棒的思路, 現在掘金也有很多面向介面程式設計的分析不在贅述.
阿里飛冰想做到大而全,這種工具說穿了就是複用程式碼, 跟技術棧沒什麼捆綁,飛冰搞了小程式物料,vue物料, 都是社群幫忙做的, 人多就是力量大啊,而且還用electron寫了app,可以說真的想用心做大了. 但是,耦合業務還得靠自己,飛冰自己玩玩夠用,中型公司還是自己搞自己的吧.
阿里fusion.design做出了筆者夢中所想,物料庫打通UI層,自動生成前端程式碼,真的棒,可惜筆者專案組全是vue,fusion的官方擁護react, 望洋興嘆, 阿里還是高屋建瓴~.
以上都是本屌絲夢中評價, 白天不負任何責任鴨.~(@^_^@)~
五、這樣開發的好與壞
1.增強專案可維護性 統一模板意味著統一技術棧, 統一規範 .
2.增加元件可用性 統一物料庫意味著, 維護n套程式碼與維護1套的差別
3.提升開發效率, 告別複製專案刪刪刪與複製空專案粘粘粘的勞工生涯.
壞處
筆者在自家廠子裡都沒推動...只能自己幹活的時候暗爽...目前覺得最大壞處就是編寫物料成本高,畢竟只有自己複用嘛...左手換右手索然無味...
六、碎碎念
隨著年齡越來越大, 想分享的慾望也日漸消沉,給自己上次的文章打個廣告吧-->像阿里PAI一樣搞機器學習平臺
最後, 感謝看完.