前端工程化小記

01-27

前端工程化，已經被很多公司實踐了，最早我知道的是從張雲龍的博客里知道的，當時也懵懵懂懂，現在也是略知一二吧。你讓我說一個定義，我不敢妄下定義，只是從我自己的工作經驗中總結出來一套前端工具和一系列的流程。

我們的項目是前後端分離項目，前端做頁面和交互操作，後端PHP提供介面和部分頁面輸出；在內部系統中是前端人員開發前後端分離項目，前端單頁應用，後端NodeJS提供介面。

這裡主要講解一下我們前後端結合開發項目中使用的辦法，整個開發工具基本成形，有些直接借鑒的開源項目，有的是自己開發的。這些工具寫的都很匆忙，有的代碼寫的也很爛很亂，項目模板還屬於起步階段，很多寫的也不好，目前比較符合我們自己的開發方式。我之後會長時間維護，希望有興趣的朋友一起參與。

前端工程化工具

項目腳手架 rocket-cli
項目模板 rocekt-template
項目管理 rocket-portal
代碼倉庫 gitlab
持續集成平台 tag平台
分支切換器 debug.js
代理服務 nginx服務
AMP Mock Server
上線 jenkins

一、項目腳手架

rocket-cli，額，我都不好意思說，其實就是vue-cli，我本來想說fork一下改造一下的，最後直接改造的只是裡面的模板路徑。。。感謝vue-cli，感謝尤雨溪

二、項目模板

既然腳手架都是vue-cli了，那模板結構當然也是vue-template的了，我這裡略顯多餘，其實可以直接用vue-cli，然後寫模板的

項目模板都是webpack構建生態工具，scripts中都內置了一些命令，本地/線上代理，hot重載，打包編譯不同環境的代碼，增量更新靜態資源

三、項目管理

在每個項目模板中都內置一個項目管理服務，這個服務是個web服務，瀏覽器打開

localhost:7577後，有四個tab頁（目前是三個，我下掉一個）

項目說明

第一個tab頁，目的是讓新人能快速了解項目的所有信息，也方便開發人員更新信息。寫了關於項目的所有信息，包括項目模板的適用範圍，設計理念，樹形目錄結構，主要功能，主要的命令，主要使用的技術。這個文件就是項目中的README.MD。

基礎配置

第二個tab頁，目的是集中項目中的配置，進行統一管理，不用再四處查找目錄下的配置文件了。這個頁面是一個項目配置信息表單，會列出項目的不同環境的配置進行修改。

Fake Data

第三個tab頁，目的是快速生成Mock Data，方便快速調試前端交互頁面。提供了一個簡單的模板數據，也提供了一個自選數據，最後都會生成到一個json的編輯器中，可以自行再次修改。

第四個tab頁(暫時下掉了)，目的是快速查看和更新現有項目中outdated的npm包。因為檢查比較慢，所以我下掉了。換一下npm源，應該會快，我就沒搞了。這是個列表，類似npm outedated的列表，可以勾選已經有新版本的包，點擊更新，就會把最新版本更新到package.json文件中，然後再去命令行npm install（為啥不一次性做了，因為這個操作慢啊，會卡死瀏覽器的）。

四、代碼倉庫

不用多說，都gitlab了

五、持續集成平台

既然用了gitlab。那麼我們在開發項目的時候，就需要遵循一個git flow，按照一定的流程去開發，會避免很多混亂和bug出現，讓一切都運行地井然有序，這個世界會有很多美好。

git項目會分四種類型的分支，master,develop,release,feature

基本流程

項目初始化後在master分支上，然後根據需求迭代開始，從master拉取一個分支成為develop分支，迭代時根據不同的功能，建立不同的feature分支，分支開發測試完畢之後，會merge到develop分支，進行集成測試，集成測試完畢之後，會從develop分支上開一個release分支，release分支上線後，將release分支merge到master分支，然後在master上打個tag。

持續集成上線

持續集成平台

tag平台主要是管理前端靜態資源的持續集成，方便迭代期內的並行開發測試上線。

主要功能包括：

項目develop分支的備份以及備份管理
分支項目靜態資源的管理
dev/test/pre環境的CDN靜態資源更新
release分支生成
操作日誌

整個項目的持續集成是需要前後端共同配合完成的。

我們通過tag平台在靜態資源伺服器上建立了項目分支和項目三個環境的靜態資源目錄，然後將這些靜態資源服務地址提供給後端開發，後端開發人員將前端地址與後端對應項目的分支配置到redis里，這樣對於一個項目的迭代期來說，比如有feature-A,feature-B,develop三個分支項目，當瀏覽器訪問某個項目的時候，請求經過nginx伺服器，nginx對於分支靜態資源地址進行了正則匹配，對於三個環境的地址直接指向對應的cdn目錄，對於後端的請求，在nginx這裡用的是openresty，寫了個lua腳本，通過請求參數從redis中讀取對應的後端項目地址，後端服務在response回來的時候，會在頁面中掛一個debug.js的腳本，會把該項目的分支配置數據以json形式輸出到頁面中，然後debug.js會將這些數據在頁面旁邊搞成一個【分支切換】小功能，這樣，在開發測試的時候，可以很方便的切換不同的分支。

在集成測試完畢之後，會從develop分支上生成一個release分支，然後通知運維在jenkins上更新上線

六、Mock Server

AMP

我們在做前端項目的時候，難免和後端開發不同步，這樣我們通過AMP平台，第一可以和後端開發一起約定介面，第二可以方便調試前端交互

七、總結

從以上工具和系統中能夠快速展開新前端項目的開發，能夠持續集成前端項目。說實話，我也不知道是不是有工程化一說，我只知道能夠提升很多的工作效率，讓開發人員儘可能的專註於需求的實現。

有沒有好機會啊？