前端工程化: 腳手架+物料庫快速生成新項目

零、前言

美團有樂高, 京東有通天塔,阿里有飛冰,大廠都在嘗試用自動化工具減小人工,看完這一篇,考慮給你的團隊搭建一套自動化開發工具吧!

1、背景

筆者所在公司並不是大廠, 發現一些痛點.

1.前端研發跟隨業務, 不一樣部門技術棧五花八門, 同崗位支援困難.( react | vue | seek.js),

2.規範不統一, 跨部門開項目, 編輯器一片紅海.standard Airbnb google.

3.組件複用困難, 過程蠻荒, 開發低效.基本停留在翻項目, 找代碼, ctrl + c, ctrl + v , 再一通亂改.

2、開發思路

利用基礎模板 + 物料(組件) 快速生成項目, 再二次開發

筆者在寫react項目時, 用過vscode的插件generateReactComponents, 感受十分方便, 考慮能不寫成一整套耦合業務的組件, 高效複用快速生成項目? 用了大概3個月的閒暇時間作出目前的工具, joao-cli, 可達到以下效果.(錄製的公司內部版, 開源版指令爲joao)

點擊可看joao cli 官網

joao主要用於vue項目, 若是你的項目基於react實現,建議使用阿里官方維護的fusion.design,而且阿里平臺已經打通了物料庫與UI層.

完成一個腳手架+物料庫的大致思路是:

1.首先創建一個空項目

安裝部門習慣用的,UI組件庫, eslint, 加上業務線本身的工具庫,字體庫,等等...高度耦合業務便可.

這裏筆者以github上的空項目爲例, 點我查看

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, 直接看不難.

3、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一個本身玩玩大概就明白怎麼回事了.

4、跟阿里飛冰, 美團樂高對比分析

首先筆者在寫完此工具後, 去研究了一下大廠的成品項目,

美團樂高的思路好像是跟後端一塊兒工程化, 很棒的思路, 如今掘金也有不少面向接口編程的分析不在贅述.

阿里飛冰想作到大而全,這種工具說穿了就是複用代碼, 跟技術棧沒什麼捆綁,飛冰搞了小程序物料,vue物料, 都是社區幫忙作的, 人多就是力量大啊,並且還用electron寫了app,能夠說真的想用心作大了. 可是,耦合業務還得靠本身,飛冰本身玩玩夠用,中型公司仍是本身搞本身的吧.

阿里fusion.design作出了筆者夢中所想,物料庫打通UI層,自動生成前端代碼,真的棒,惋惜筆者項目組全是vue,fusion的官方擁護react, 望洋興嘆, 阿里仍是高屋建瓴~.

以上都是本屌絲夢中評價, 白天不負任何責任鴨.~(@^_^@)~

5、這樣開發的好與壞

1.加強項目可維護性 統一模板意味着統一技術棧, 統一規範 .

2.增長組件可用性 統一物料庫意味着, 維護n套代碼與維護1套的差異

3.提高開發效率, 告別複製項目刪刪刪與複製空項目粘粘粘的勞工生涯.

壞處

筆者在自家廠子裏都沒推進...只能本身幹活的時候暗爽...目前以爲最大壞處就是編寫物料成本高,畢竟只有本身複用嘛...左手換右手索然無味...

6、碎碎念

隨着年齡愈來愈大, 想分享的慾望也日漸消沉,給本身上次的文章打個廣告吧-->像阿里PAI同樣搞機器學習平臺

最後, 感謝看完.

joao cli 官網