前端開發體系建設

DevOps(Development和Operations的組合詞)是一組過程、方法與系統的統稱,用於促進開發(應用程序/軟件工程)、技術運營和質量保障(QA)部門之間的溝通、協作與整合。

一套簡易的DevOps流程包括協作,構建,測試,部署,運行。

DevOps的核心思想就是:快速交互價值,靈活響應變化。

接下來我將從5個方面談談協作,構建,測試,部署,運行。在DevOps中具體是怎麼做的?

團隊內的問題

  1. 程序員間水平各異,編碼風格不統一,項目間難以管理
  2. 不同項目間打包配置差異過大,公共代碼和請求封裝的函數不一樣
  3. 項目目錄結構不統一,沒有跨系統組件複用的能力,基礎組件沒法複用,全靠複製值粘貼
  4. 代碼沒有註釋,項目沒有文檔,新人難以入手,舊項目寫完也不去優化。

通過校驗統一風格

1、代碼管理
添加 ESLint 代碼校驗
如果是 Vue 開發參考Vue官方的風格指南:鏈接

關於工具
最好做到項目組統一,都用mac和vscode,包括node版本,webpack版本,也最好一致,減少不必要的環境問題

對於代碼提交 git hooks,進行commit校驗,安裝git cz命令,不瞭解可以看這裏

製作前端物料

每個公司都有自己的前端風格,我們可以通過基於已有的第三方組件庫如Element UI進行二次封裝,統一公司內部的視覺規範。

如果在公司維護的是TOB產品,大部分都是管理系統,那麼我們把整個頁面都抽離成公共的組件,然後細分容器組件和顯示組件,容器組件負責佈局,顯示組件負責數據展示和交互,之後通過組合的方法,拼接成你想要的頁面。

還有一些公共的函數,項目組要多溝通,不要重複的寫,如果有文檔就好了,知道哪些函數已經有了,哪些函數沒有需要自己寫

多項目之間目錄風格和打包配置要一致,我們可以通過自己編寫腳手架,並且寫好模板,然後再新項目到來的時候直接下載模板。比如Vue-cli,這樣的腳手架,直接執行 vue create my-app命令即可,這裏需要注意,爲什麼不用Vue官方的而是自己寫腳手架,這是應爲公司內容的配置大多數都是定製化,自帶的腳手架很多功能和項目不符合,所以需要自己寫。

單元測試

建議所有的公共方法都要寫測試用例,Jest單元測試,單元測試最好要從正面和反面測試

部署

持續集成做到項目發佈流程自動完成,只要每次提交代碼,就會執行build命令開始構建項目,這裏提一下我們項目是如何做的
使用Jenkins構建工具,配合gitlab-hooks完成,hooks會在每次合併代碼會向向Jenkins發送請求,Jenkins收到請求然後執行shell腳本開始構建項目,項目構建後如何啓動項目,我們可以使用Nginx或者pm2都行,nignx作爲靜態服務

運行

我們項目都是放在Nginx服務器,作爲靜態資源,動態資源則會配置代理

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章