如何構建大型的前端專案

senntyou發表於2018-10-11
前端

如何構建大型的前端專案

1. 搭建好專案的腳手架

一般新開發一個專案時，我們會首先搭建好一個腳手架，然後才會開始寫程式碼。一般腳手架都應當有以下的幾個功能：

  1. 自動化構建程式碼，比如打包、壓縮、上傳等功能
  2. 本地開發與除錯，並有熱替換與熱載入等功能
  3. 本地介面資料模擬
  4. css 模組化
  5. 檢查並自動矯正不符合規範的程式碼，並優化程式碼格式

社群已有很多模板（boilerplate）或工具幫助我們搭建一個現成的腳手架，比如：

當然，如果這些模板或工具都不能滿足你的需求，你也可以搭建自己的腳手架，可以參考：

2. 定義好專案的目錄結構

對於大型目錄而言，一個好的目錄結構是非常必要的。一個好的目錄結構應當具有以下的一些特點：

  1. 解耦：程式碼儘量去耦合，這樣程式碼邏輯清晰，也容易擴充套件
  2. 分塊：按照功能對程式碼進行分塊、分組，並能快捷的新增分塊、分組
  3. 編輯器友好：需要更新功能時，可以很快的定位到相關檔案，並且這些檔案應該是很靠近的，而不至於到處找檔案

可以參考 目錄結構優化

3. 做好專案的元件化

這裡的元件化，並非框架層面的元件化，而是工程層面的元件化。

當一個專案中的不同的區塊需要共用同一段程式碼，或者不同專案之間需要共享同一個元件的時候，就需要做元件化了。

元件化一般分為專案內的元件化和專案外的元件化。

專案內的元件化是，同一個專案內不同區塊共用的程式碼可以提取出來為一個單獨的元件。

專案外的元件化是，跨專案間共享的程式碼可以提取出來為一個單獨的專案，然後如正常的 npm 包一樣使用。

可以參考：

4. 封裝團隊的構建工具

對於多專案而言，不管使用 webpack 還是 rollup 來打包專案，都會面臨一些問題：

  1. 不同專案有不同配置檔案，更新配置需要到處改，而且很難保持一致
  2. 如果有專案的升級，不同區塊可能會有不同的配置

這個時候，把配置檔案封裝成一個專案，然後使用版本化的方式管理，如正常的 npm 包一樣使用，就會很方便了。

比如，我的專案都是使用 lila 來構建的。

5. 選好基礎 js 框架、ui 框架、頁面模板

開始開發前，需要先選好基礎 js 框架，比如 react、vue、angular、jquery 等，因為一旦選定，基本上後面都不能更換了，因為更換的成本太大了。

選好基礎 js 框架後，可以選一個比較好的 ui 框架，這樣可以少寫很多程式碼，可以參考 前端最受歡迎的 UI 框架。

如果頁面的定製化程度不高，可以選擇一個比較好的頁面模板，比如：

6. 測試

一般前端測試分以下幾種：

  1. 單元測試：模組單元、函式單元、元件單元等的單元塊的測試
  2. 整合測試：介面依賴（ajax）、I/O 依賴、環境依賴（localStorage、IndexedDB）等的上下文的整合測試
  3. 樣式測試：對樣式的測試
  4. E2E 測試：端到端測試，也就是在實際生產環境測試整個應用

一般會用到下面的一些工具：

另外，可以參考 聊聊前端開發的測試。

7. 持續整合構建與測試

一般大型工程的的構建與測試都會花很長的時間，在本地做這些事情的話就不太實際，這就需要做持續整合構建與測試了。

持續整合工具用的比較多的：

jenkins 是通用型的工具，可以與 github、bitbucket、gitlab 等程式碼託管服務配合使用，優點是功能強大、外掛多、社群活躍，但缺點是配置複雜、使用難度較高。

gitlab ci 是 gitlab 內部自帶的持續整合功能，優點是使用簡單、配置簡單，但缺點是不及 jenkins 功能強大、繫結 gitlab 才能使用。

另外，如果是開源專案，travis ci 是個不錯的選擇。

後續

更多部落格，檢視 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權宣告：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）

相關文章