前端項目開發流程思考

這裏有一份簡潔的前端知識體系等待你查收，看看吧，會有驚喜哦~若是以爲不錯，懇求star哈~

引言

有項目開發經驗的童鞋都應該知道，開啓一個新的項目，不是上來就開始敲代碼的，而是應該有一個約定俗成的流程。

假設你如今要作一個react項目，有哪些重要的環境是必需要考慮的呢？

本人認爲應該考慮四個方面：工程架構、項目架構、業務開發、聯調及投產上線~

工程架構

要配置一個能跑起來的工程，目前來講是離不開webpack。

webpack能夠幫咱們作不少事情，好比如何編譯jsx文件、如何處理圖片等靜態文件、如何打包、如何作前端優化等等。

隨着webAPP的發展，單頁應用愈來愈多，服務端渲染也愈來愈受到前端開發者的重視，而webpack也能夠幫助咱們作到服務端渲染。

工程架構要達到的目的有三，分別是：

1. 解放生產力 咱們但願 在開發過程當中，把精力都聚焦在業務代碼上，不須要考慮其餘重複性的操做，好比：

• 源代碼預處理
• 自動打包、自動更新頁面顯示
• 自動處理圖片依賴，保證開發和正式環境的統一

2. 圍繞解決方案搭建環境 react、vue、angular等框架的開發模式都是不同的。react是jsx文件，vue是.vue文件，angular使用ts開發等。瀏覽器沒法直接解析jsx、.vue等，咱們須要一個編譯的過程。 因此咱們須要注意的點有：

• 不一樣的前端框架須要不一樣的運行架構
• 預期可能出現的問題並規避，好比使用sass來規避將來項目大了後CSS編寫的問題等

3. 保證項目的質量 主要有兩點做用，一是保證風格一致，有利於團隊成員更好理解，二是有利於代碼排錯。 經常使用的方案有：

• code lint
• git commit 預處理

項目架構

工程搭建好了以後，咱們就要搭建項目架構。

工程建構考慮的是讓工程跑起來、更方便進行開發，而項目架構是考慮的項目的分層、更好地編程及更好的擴展性。

項目架構要考慮的點包括：

• 技術選型：假設咱們作的是react項目，那咱們就要配置路由和數據倉庫。數據路由咱們能夠毫無疑問地使用react-router來作。數據倉庫（store）部分咱們能夠考慮使用redux，也能夠考慮使用Mobx這個後起之秀。Mobx相對redux來講更加簡單，效率也更高。
• 總體代碼風格

業務開發

項目架構搭建好，就能夠真正動手開發業務了。

聯調及投產上線

因爲本文是針對前端項目，因此不會過多考慮後端的開發。

前端業務代碼開發完畢，就能夠跟後端童鞋進行聯調，並交付測試組測試，最終投產上線~

最後

本文比較簡單，是本人的一些思考。若是你有補充的，麻煩留言告知，不勝感激~