一個完整的前端項目如果想要不斷的持續開發下去，一定在最初的時候就要有一個完整的解決方案。在這裏我教給大家其中的一種解決方案。以後會放出升級版，這一版是最原始的版本。
前後端分離的開始
首先簡單的把前後端分離出來吧。
1.所有資源全都靜態化，數據都從後端的接口獲取。
2.使用nginx將前端和後端鏈接在一起，同時將資源和頁面分開。
以上部分就顯示了分離以及分離之後組成的頁面部分。其中前端資源包括css、js、圖片等。這部分也可以做cdn加速等操作。
前端模塊化
前端模塊化也是前端組件化。它是把所有資源看做是一塊一塊的結果集。你可以認爲一堆接口+幾個頁面+幾個針對的js文件就組合成了一個模塊。這個模塊對應業務或者邏輯上的一個模塊。如果再看微服務的同學可能會更理解一些。
1.業務的分離更適合後端的分離。
2.統一的接口代表了統一的變化
3.不同的模塊自由組合。可以是模塊的組合也可以是js、css的組合
4.前端內部再次分離，更細粒度的控制js、css等資源，最終在構建的時候統一處理，減少重複開發。
一些實現方式
以下就是一些涉及到的技術選擇了。
1.css部分。通過less的分離導入功能做到統一部分合並，不同的地方使用不同的樣式。
2.js部分。使用requrejs導入不同的js文件在做異步加載，更利於頁面的加載速度，更好的模塊化方式。
3.頁面。使用gulp來出來這些模塊化的頁面。
以上就是一些簡單的模塊化選擇，當然這只是一個基礎，更復雜的是後面的部分。
其他實現
1.基礎模塊。在所有模塊加載之前，有一個基礎模塊需要先處理，它的優先級非常高。它通常會需要做權限的判斷，預設內容的判斷，登錄狀態的管理等等。類似於一個篩選器，將一些不能夠看的功能隱藏或者跳轉到其他頁面等。
2.ajax模塊。這個模塊隱藏在所有接口文件後面。因爲要做一些特殊處理。比如token驗證、返回格式驗證、報錯信息驗證提示等。
3.多語言的一部分。對的，你沒有看錯。多語言涉及到的一部分也在這裏。包括不同語言的css文件加載、不同語言的提示文件加載等等。。
4.gulp處理。整個項目的開發都是構建在gulp的基礎上的。包括css處理、es6處理、圖片處理、httpserver的啓動和重啓等。除了這些基礎的東西外還有多語言的一部分。版本控制、不同環境構建命令等。
這些是使用到的一些插件。
這個是本地開發使用到的命令，下面是動態輸出的配置。
對的，還有Nginx。線上會有運維管理。開發環境還是需要自己手動配置的。不同的環境，不同的服務器都需要使用Nginx來連接。至於host的配置就不貼圖了，那個沒有啥難度。
開發流程
1.首先在git分支上開發。這一步還是原始流程。
2.使用Nginx連接開發服務器測試開發結果，如果有問題甚至可以連接後端同事的電腦做測試。
3.由運維部署到測試環境，並進行統一的測試。這個階段有測試同學介入。
4.線上測試。這一步基本上是做正式的測試，防止問題發生在線上環境。
5.測試完成，正式上線。
注：可以是使用Jenkins來做各個環境的部署。上面的動態配置可以根據不同的環境生成不同代碼。運維同學完全可以一鍵搞定git管理、代碼構建發佈。下面是一張項目結構圖。
以上就是一個完整的前端解決方案。有問題歡迎問我。