談一談前端工程化

前端持續集成

先來說下前端持續集成的流程吧，我畫了一個簡圖。

個人目標是構建一個工程化的全自動環境，使得開發者在不改變現有工做方式的前提下（無痛）完成代碼集成等一系列工做。影響的角色：開發，測試，產品經理，領導。

（圖中實線表明須要手動進行，虛線表明自動執行）

1.1開發者首先提交代碼到中央倉庫，中央倉庫觸發鉤子通知CI Server有代碼提交。（開發者不須要爲此作任何改變，和之前同樣提交代碼就能夠了）

1.2.收到通知後CI Server會自動執行一段腳本（checkout->build->lint->test）.完成以後會發郵件（調用Mail Service）通知開發者和代碼維護者（好比tester等）構建信息（全自動）

 

2.1開發人員給代碼打tag，中央倉庫觸發鉤子通知CD Server有tag生成。（開發者不須要爲此作任何改變，和之前同樣打tag就能夠了）

2.2收到通知後CD Server自動執行一段腳本（checkout->build->deploy）（全自動）

2.3項目上線後出現問題（報錯）會郵件（調用Mail Service）通知開發者（圖中也通知了維護者，視狀況而定）報錯的函數和上下文信息，方便開發及時發現問題並快速排查。（全自動）

 

3.1開發者首先提交代碼到中央倉庫，中央倉庫觸發鉤子通知package analyser（開發者不須要爲此作任何改變，和之前同樣提交代碼就能夠了）

3.2analyser server 對代碼的pakage.json文件進行比對，若是發生變化，則分析應用的依賴包，列出當前包的信息（好比依賴的包更新了一個bug，咱們能及時知曉並更新修復）。（全自動）

 

4.1代碼檢查經過後，開發者發起pull request。（開發者不須要爲此作任何改變，和之前同樣提交pull request就能夠了）

4.2維護者看到CI發過來的信息，進行代碼審查，根據結果合併或者拒絕。（有了自動集成結果的支持，不須要維護者本身運行去檢查了）

 

5.對於用戶，能夠提供一個dashboard。 展現CI  CD 以及Package Analyser的結果（全新產品，就是上述各個系統的運行信息上報給呈現出現，並進行適當加工。）

 

固然這張圖不單單是前端使用，基於docker CI CD 徹底能夠通用。可是對於package Analyser咱們可能須要作一些變通。 由於package Analyser 做爲前端的話分析的是node package 做爲後端則是maven repository。 

1.transformer 負責從不一樣來源（node package 和 maven repository）轉化爲標準輸出

2.fetcher拿到信息以後去請求不一樣倉庫獲取版本信息和版本CHANGLOG

正規開源軟件都是遵循語義化版本的。也就是傳說中的主版本，次版本和修訂版。

另外正規開源軟件都是有更細日誌CHANGLOG的，根據這些咱們能夠獲得一些信息。

對於公司內部私有項目，但願也遵循這樣的規範

3.reducer過濾掉不須要顯示的，彙總成標準輸出格式

4.view層拿到標準輸入，展示給user

5.user能夠查看對應項目的包分析結果。

前端開發工程化

下面這張圖描述了我目前開發的流程，這套流程能夠很好的完成先後端解耦。另一些前端工程化的東西我沒有涉及（好比liveload，less處理，合併壓縮等），這些均可以實現自動化。並非說那些不重要，只是網上例子太多，自行google就行了。

1.開發拿到設計，約定接口，記錄到api server

2.本地開發 host 改爲本地ip

好比程序中fetch('www.ltcrm.com/a')

host 增長一行： 127.0.0.1 front.ltcrm.com

3.聯調 host改爲 後端開發者ip

host 增長一行： 10.33.88.144 front.ltcrm.com

10.33.88.144是後端開發者ip

4.用戶能夠查看項目接口信息