前言：在web前端業務日益復雜化和多元化的情況下，前端的工作已經不在是寫幾個頁面和寫幾個互動效果就能完成的工作了。當工程復雜到一定程度就會產生很多問題，比如項目的可維護性，如何提高開發效率和開發質量，如何進行多人協作，降低生產的風險？下面我們了解的前端工程化就可以幫我們解決這些問題。
什么是前端工程化
前端工程化是使用軟件工程的技術和方法來進行前端的開發流程、技術、工具、經驗等規范化、標準化，其主要目的是為了提高效率和降低成本，即提高開發過程中的開發效率，減少不必要的重復時間。
前端工程化如何做？
個人認為從模塊化，組件化，規范化，自動化四個方面思考
模塊化
-
js的模塊化
在ES6之前，一直沒有模塊系統，現在ES6已經在語言層面上規定了模塊系統。
js的模塊化主要有CommonJS規范，AMD規范，CMD規范，ES6模塊化。這里主要使用的是ES6模塊化，其他的規范感興趣的話可以去做一些了解。去了解
在ES6中，我們可以使用 import 關鍵字引入模塊，通過 exprot 關鍵字導出模塊 -
css的模塊化
雖然SASS、LESS、Stylus等預處理器實現了CSS的文件拆分，但沒有解決CSS模塊化的一個重要問題：選擇器的全局污染問題。
這時就需要CSS Modules來解決，它仍然使用css，只是讓JS來管理依賴。它能夠最大化地結合CSS生態和JS模塊化能力，目前來看是最好的解決方案。
-
資源的模塊化
webpack的強大之處不僅僅在于它統一了JS的各種模塊系統，更重要的是它的萬能模塊加載理念?？梢杂胠oader對各種資源做各種事情，即所有的資源都可以且應該模塊化。（即HTML資源，css資源，js資源，圖片資源，字體資源等）
組件化
即從UI拆分下來的每個包含html+css+js功能完備的結構單元，我們稱之為組件。
組件化更是一種分治思想，即頁面上所有的東西都是組件，頁面是個大型組件，里面拆分成若干個中型組件，然后可以再拆，拆成若干個小型組件。當然小型組件也可以在拆，直到拆成DOM元素為止，不過沒有必要，組件化主要是為了實現組件在多個頁面的復用。
比如你的頁面中有一個導航條或者輪播圖的功能，那你可以把它設計為組件，在多個頁面中使用這個組件，當需求變動的時候只需要改這個組件里面的東西就可以了。
目前市面上的組件化框架很多，主要有Vue、React、Angular。
規范化
規范化是工程化中很重要的一個部分，項目初期規范制定的好壞會直接影響到后期的開發質量和維護成本。比如
-
目錄結構的制定
目錄結構的合理制定，可以為項目帶來很多優點：
- 有助于提高項目的邏輯結構合理性；
- 對應擴展和合作；
- 方便資源的統一定位管理；
-
編碼規范
制作一套良好的編碼規范可以增強團隊開發協作、提高代碼質量。推薦參考凹凸實驗室打造的前端代碼規范。
編碼規范包括：HTML規范、CSS規范、JS規范、圖片規范、命名規范
-
前后端接口規范
在平常的開發中，前后端的關鍵協作點是ajax接口，這就引發一個問題，在沒有任何接口約定規范情況下各自擼起柚子就是干，導致我們在開發過程中前后端接口聯調對接工作占比非常高。
而接口規范主要初衷就是規范約定先行，盡量避免溝通中產生的不必要問題，讓大家更愉快的專注于各自擅長的領域。
職責分離：后端就提供數據，處理業務邏輯。前端就接收數據，返回數據，處理渲染邏輯。
-
規范原則
- 接口返回數據顯示，前端做渲染邏輯處理；
- 渲染邏輯禁止多個接口調用；
- 前端關注交互、渲染邏輯，盡量避免業務邏輯處理的出現；
- 請求響應傳輸數據格式：JSON，JSON數據盡量簡單輕量，避免多級JSON的出現；
-
響應格式
響應基本格式及處理狀態值的規范。
-
特殊內容
下拉框、復選框、單選框統一由后端邏輯判定選中返回給前端展示；
關于Boolean類型，JSON數據傳輸中一律使用1/0來標示，1為是/True，0為否/False
關于日期類型，JSON數據傳輸中一律使用字符串，具體日期格式因業務而定；
文檔規范
組件管理
git分支管理
commit描述規范
視覺圖標規范
...
自動化
前端工程化的很多臟活累活都應該交給自動化工具來完成。秉承的理念就是：任何簡單機械的重復勞動都應該讓機器去完成。
- 圖標合并
- 持續集成
- 自動化構建
- 自動化部署
- 自動化測試
