如何構建大型的前端項目

如何構建大型的前端項目

1. 搭建好項目的腳手架

通常新開發一個項目時，咱們會首先搭建好一個腳手架，而後纔會開始寫代碼。通常腳手架都應當有如下的幾個功能：

1. 自動化構建代碼，好比打包、壓縮、上傳等功能
2. 本地開發與調試，並有熱替換與熱加載等功能
3. 本地接口數據模擬
4. css 模塊化
5. 檢查並自動矯正不符合規範的代碼，並優化代碼格式

社區已有不少模板（boilerplate）或工具幫助咱們搭建一個現成的腳手架，好比：

• create-react-app
• vue-cli
• yeoman
• html5-boilerplate
• react-boilerplate
• hackathon-starter

固然，若是這些模板或工具都不能知足你的需求，你也能夠搭建本身的腳手架，能夠參考：

• 搭建本身的前端腳手架
• 怎樣提高代碼質量
• CSS 模塊化
• css 的弱化與 js 的強化
• 本地化接口模擬、先後端並行開發

2. 定義好項目的目錄結構

對於大型目錄而言，一個好的目錄結構是很是必要的。一個好的目錄結構應當具備如下的一些特色：

1. 解耦：代碼儘可能去耦合，這樣代碼邏輯清晰，也容易擴展
2. 分塊：按照功能對代碼進行分塊、分組，並能快捷的添加分塊、分組
3. 編輯器友好：須要更新功能時，能夠很快的定位到相關文件，而且這些文件應該是很靠近的，而不至於處處找文件

能夠參考 目錄結構優化

3. 作好項目的組件化

這裏的組件化，並不是框架層面的組件化，而是工程層面的組件化。

當一個項目中的不一樣的區塊須要共用同一段代碼，或者不一樣項目之間須要共享同一個組件的時候，就須要作組件化了。

組件化通常分爲項目內的組件化和項目外的組件化。

項目內的組件化是，同一個項目內不一樣區塊共用的代碼能夠提取出來爲一個單獨的組件。

項目外的組件化是，跨項目間共享的代碼能夠提取出來爲一個單獨的項目，而後如正常的 npm 包同樣使用。

能夠參考：

• 組件化
• 私有 npm 倉庫

4. 封裝團隊的構建工具

對於多項目而言，無論使用 webpack 仍是 rollup 來打包項目，都會面臨一些問題：

1. 不一樣項目有不一樣配置文件，更新配置須要處處改，並且很難保持一致
2. 若是有項目的升級，不一樣區塊可能會有不一樣的配置

這個時候，把配置文件封裝成一個項目，而後使用版本化的方式管理，如正常的 npm 包同樣使用，就會很方便了。

好比，個人項目都是使用 lila 來構建的。

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

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

選好基礎 js 框架後，能夠選一個比較好的 ui 框架，這樣能夠少寫不少代碼，能夠參考 前端最受歡迎的 UI 框架。

若是頁面的定製化程度不高，能夠選擇一個比較好的頁面模板，好比：

• AdminLTE
• vue-element-admin
• gentelella
• ngx-admin
• ant-design-pro

6. 測試

通常前端測試分如下幾種：

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

通常會用到下面的一些工具：

• jest
• enzyme
• cypress
• selenium
• puppeteer

另外，能夠參考 聊聊前端開發的測試。

7. 持續集成構建與測試

通常大型工程的的構建與測試都會花很長的時間，在本地作這些事情的話就不太實際，這就須要作持續集成構建與測試了。

持續集成工具用的比較多的：

• jenkins
• gitlab ci

jenkins 是通用型的工具，能夠與 github、bitbucket、gitlab 等代碼託管服務配合使用，優勢是功能強大、插件多、社區活躍，但缺點是配置複雜、使用難度較高。

gitlab ci 是 gitlab 內部自帶的持續集成功能，優勢是使用簡單、配置簡單，但缺點是不及 jenkins 功能強大、綁定 gitlab 才能使用。

另外，若是是開源項目，travis ci 是個不錯的選擇。

後續

更多博客，查看 https://github.com/senntyou/blogs

做者：深予之 (@senntyou)

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