引言
有專案開發經驗的童鞋都應該知道，開啟一個新的專案，不是上來就開始敲程式碼的，而是應該有一個約定俗成的流程。
假設你現在要做一個react專案，有哪些重要的環境是必須要考慮的呢？
本人認為應該考慮四個方面：工程架構、專案架構、業務開發、聯調及投產上線~
工程架構
要配置一個能跑起來的工程，目前來說是離不開webpack。
webpack可以幫我們做很多事情，比如如何編譯jsx檔案、如何處理圖片等靜態檔案、如何打包、如何做前端優化等等。
隨著webAPP的發展，單頁應用越來越多，服務端渲染也越來越受到前端開發者的重視，而webpack也可以幫助我們做到服務端渲染。
工程架構要達到的目的有三，分別是：
- 解放生產力 我們希望 在開發過程中，把精力都聚焦在業務程式碼上，不需要考慮其他重複性的操作，比如：
- 原始碼預處理
- 自動打包、自動更新頁面顯示
- 自動處理圖片依賴，保證開發和正式環境的統一
- 圍繞解決方案搭建環境 react、vue、angular等框架的開發模式都是不一樣的。react是jsx檔案，vue是.vue檔案，angular使用ts開發等。瀏覽器無法直接解析jsx、.vue等，我們需要一個編譯的過程。 所以我們需要注意的點有：
- 不同的前端框架需要不同的執行架構
- 預期可能出現的問題並規避，比如使用sass來規避未來專案大了後CSS編寫的問題等
- 保證專案的質量 主要有兩點作用，一是保證風格一致，有利於團隊成員更好理解，二是有利於程式碼排錯。 常用的方案有：
- code lint
- git commit 預處理
專案架構
工程搭建好了之後，我們就要搭建專案架構。
工程建構考慮的是讓工程跑起來、更方便進行開發，而專案架構是考慮的專案的分層、更好地程式設計及更好的擴充套件性。
專案架構要考慮的點包括：
- 技術選型：假設我們做的是react專案，那我們就要配置路由和資料倉儲。資料路由我們可以毫無疑問地使用react-router來做。資料倉儲（store）部分我們可以考慮使用redux，也可以考慮使用Mobx這個後起之秀。Mobx相對redux來說更加簡單，效率也更高。
- 整體程式碼風格
業務開發
專案架構搭建好，就可以真正動手開發業務了。
聯調及投產上線
由於本文是針對前端專案，所以不會過多考慮後端的開發。
前端業務程式碼開發完畢，就可以跟後端童鞋進行聯調，並交付測試組測試，最終投產上線~
最後
本文比較簡單，是本人的一些思考。如果你有補充的，麻煩留言告知，不勝感激~