前端工程化:體系設計與實踐 前端工程化:体系设计与实践

周俊鵬
1987年生人，天蠍座，5隻貓和1隻狗的鏟屎官，大前端（客戶端+Web Service）踐行者。主要研究方向為前端工程化和Web應用層架構，好於研究事物的本質，並且樂於從宏觀的角度解決問題。時任搜狗地圖Web前端開發主管。

第1章前端工程簡史1 
1.1前端工程師的基本素養2 
1.1.1前端工程師的發展歷史2 
1.1.2前端工程師的技能棧3 
1.2 Node.js帶給前端的改革7 
1.2.1前端的兩次新生7 
1.2.2 Node.js帶來的改革9 
1.3前後端分離12 
1.3.1原始的前後端開發模式13 
1.3.2前後端分離的基本模式14 
1.3.3前後端分離與前端工程化19 
1.4前端工程化19 
1.4.1前端工程化的衡量準則20 
1.4.2前端工程化的進化歷程21 
1.4.3前端工程化的3個階段32 
1.5工程化方案架構34 
1.5.1 webpack 34 
1.5.2工程化方案的整體架構36 
1.5.3功能規劃37 
1.5.4設計原則41 
1.6總結42 

第2章腳手架43 
2.1腳手架的功能和本質44 
2.2腳手架在前端工程中的角色和特徵45 
2.2.1用完即棄的發起者角色45 
2.2.2局限於本地的執行環境47 
2.2.3多樣性的實現模式49
2.3開源腳手架案例剖析51 
2.4集成Yeoman封裝腳手架方案56 
2.4.1封裝腳手架方案57 
2.4.2集成到工程化體系中63 
2.5總結66 

第3章構建68 
3.1構建功能解決的問題68 
3.2配置API設計原則和編程範式約束71 
3.2.1配置API設計71 
3.2.2編程範式約束75 
3.3 ECMAScript與Babel 76 
3.3.1 ECMAScript發展史76 
3.3.2 ES6的跨時代意義78 
3.3.3 Babel——真正意義的JavaScript編譯80 
3.3.4結合webpack與Babel實現JavaScript構建84 
3.4 CSS預編譯與PostCSS 89 
3.4.1 CSS的缺陷90 
3.4.2 CSS預編譯器90 
3.4.3 PostCSS 91 
3.4.4 webpack結合預編譯與PostCSS實現CSS構建93 
3.4.5案例：自動生成CSS Sprites功能實現95 
3.5模塊化開發101 
3.5.1模塊化與組件化101 
3.5.2模塊化與工程化102 
3.5.3模塊化開發的價值103 
3.5.4前端模塊化發展史107
3.5.5 webpack模塊化構建109 
3.6增量更新與緩存112 
3.6.1 HTTP緩存策略113 
3.6.2覆蓋更新與增量更新117 
3.6.3按需加載與多模塊架構場景下的增量更新120 
3.6 .4 webpack實現增量更新構建方案122 
3.7資源定位128 
3.7.1資源定位的歷史變遷128 
3.7.2常規的資源定位思維132 
3.7.3 webpack的逆向註入模式132 
3.8總結147 

第4章本地開發服務器149 
4.1本地開發服務器解決的問題150 
4.2動態構建152 
4.2.1 webpack-dev-middleware 152 
4.2.2 Livereload和HMR 157 
4.3 Mock服務161 
4.3.1 Mock的必要前提和發展進程162 
4.3.2異步數據接口166 
4.3.3 SSR 172 
4.4總結174 

第5章部署175 
5.1部署流程的設計原則175 
5.1.1速度——化繁為簡177 
5.1.2協作——代碼審查和部署隊列181 
5.1.3安全——嚴格審查和權限控制184 
5.2流程之外：前端靜態資源的部署策略186
5.2.1協商緩存與強制緩存186 
5.2.2 Apache設置緩存策略186 
5.3總結190 

第6章工作流191 
6.1本地工作流192 
6.1.1二次構建的隱患193 
6.1.2代碼分離與測試沙箱194 
6.2雲平臺工作流197 
6.2.1 GitFlow與版本管理199 
6.2.2 WebHook與自動構建201 
6.3持續集成與持續交付203 
6.4總結205 

第7章前端工程化的未來206 
7.1前端工程師未來的定位206 
7.1. 1不只是瀏覽器207 
7.1.2也不只是Web 208 
7.2前端工程化是一張藍圖209 
7.3總結212