産品特色

編輯推薦

1.本書由周愛民老師傾情作序，美團技術總監趙強、搜狐高級技術經理邵充、Facebook軟件工程師鄧淩飛、ofo前端架構師代學輝聯袂力薦。

2.本書係統、全麵地介紹瞭前端工程體係的各個環節，包括設計要點和實踐經驗。全書分為7章，分彆包括緒論、腳手架、構建、本地開發服務器、部署、工作流、前端工程化的未來。

3.本書以本地工具鏈形態的前端工程化方案Boi為例，以Yeoman為內核的腳手架、以Express承載本地服務器、以webpack為內核的構建係統、基於SFTP協議的遠程部署功能，這個方案的很多理念可以作為論證本書觀點的參考。

4.前端工程化現在正處於不斷探索的初級階段，這本書提供瞭大量的前端工程師可藉鑒、參考並投之於生産實作的實踐，適閤前端工程師進階學習和參考。

內容簡介

前端工程化包含一係列規範和流程，其可提升前端工程師的工作效率，加快Web開發迭代速度，是現在前端開發領域中非常重要的一環。《前端工程化：體係設計與實踐》係統、全麵地介紹瞭前端工程體係的各個環節，包括設計要點和實踐經驗。全書分為7章，分彆是前端工程簡史、腳手架、構建、本地開發服務器、部署、工作流、前端工程化的未來。

《前端工程化：體係設計與實踐》適閤對前端工程化有一定理解和實踐的中高級前端工程師閱讀，同樣適閤對前端工程化感興趣的服務器端開發者以及運維人員閱讀。

作者簡介

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

精彩書評

前端技術棧在Web 2.0時代來臨後，搭上瞭高速列車，幾年時間裏迅速完成瞭從麵嚮過程到麵嚮對象的轉變。但對於前端工程師來說研發效率一直是一個痛點。有幸在與俊鵬同學共事期間，見證瞭其積極探索並付諸實踐地嘗試改變現狀，通過Boi框架來將思想落地並將其開源齣來，從而讓更多前端小夥伴從中受益。本書更是體係化地介紹瞭前端工程體係設計思想，適閤前端工程師進階學習和參考。

——美團技術總監 趙強

看到有關前端工程化的書，迴想自己從事Web開發的曆程，感受到現在的前端工程師正處在前端編程飛速發展的時期。如果你沒有做過美工（早期前端工程師的統稱）或者維護過一個超過3000行的JavaScript代碼文件，可能會無法理解工程化帶來的收益。本書很詳細地講解瞭前端項目從構建到發布的完整過程，對於已經有開發經驗的前端工程師來說，可以用於梳理現有項目結構、進行代碼重構，也可為準備進入前端領域的新工程師指明學習前端知識的路綫。

——搜狐高級技術經理 邵充

Web産品的需求和技術的進化是非常迅速的，前端領域尤為明顯。開發人員需要考慮功能、交互、UI的實現，並且兼顧用戶體驗與性能。邏輯與架構復雜度的提升是一個熵增的過程，無序、耦閤等因素睏擾著Web開發人員，嚴重拖纍瞭工作效率。工程化以嚴謹的、規範的工作流程，將無序化有序，將耦閤化鬆散。本書剖析瞭建設前端工程體係需要考慮的各方麵因素，為剛剛踏入前端工程領域的開發者和團隊提供瞭優質的參考。

——Facebook Software Engineer 鄧淩飛

俊鵬是我的前同事，其多年豐富的經驗在本書內體現得淋灕盡緻。他站在架構師的高度，將前端工程化工作流實踐整理成書，獨具特色。特彆適閤中高級前端研發人員或有誌從事前端架構相關工作的人員研讀。

——ofo前端架構師 代學輝

目錄

第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

前言/序言

推薦序

技術之外

前端工程體係是一種服務，以項目迭代過程中的前端開發為主要服務對象，涉及開發、構建、部署等環節。

——摘自《前端工程化：體係設計與實踐》

阿裏的玉伯曾經問過我一個問題：前端該不該碰業務？具體一點地說，就是前端要不要瞭解後端的業務邏輯，甚至將部分這樣的邏輯與規則放在前端來處理與實現。我當時思考瞭片刻，給玉伯的建議是：前端還是不要碰業務邏輯，圍繞著交互做就好瞭。

事實上這個問題的答案有很多，不同的場景下也可以各有權衡，所以上麵的答案也並非標準答案。但我在這裏提及這件事情的原因是：這個問題的前設、背景與分析過程，是技術無關的。顯而易見，我們並沒有討論哪一種框架來解決何種技術問題，又或者在技術上如何做前後端分離。我們是在討論一個根本上的工程協作問題：誰，該做什麼？這個問題的關鍵點，就是“什麼是領域劃分的事實依據”。

前端的工程化，事實上還處在一個原始階段。我們如今之所視，可以一言以蔽之：或在對語言內在功能特性的補充，或在對其外在組織能力的補充。這些種種補充，盡是在工程體係的“工具”這一隅上做的功夫。可以預見的是，在前端工程這個體係上前行，必然麵臨的問題是過程的優化和方法論的建立。然而如今前端在這些大的、根本性的問題上並沒有任何觸及，甚至連上麵這樣的“領域劃分”問題都沒有被認真地討論過。

這些問題，也都如同開始的那個問題一樣，是在技術之外。

所幸作者是意識到瞭這一點的。他在本書中將“前端工程體係”定義成一種服務，而非一種工程模型。從作者的定義來看，這個體係是可資實用的一種工具——可討論、可實現，以及可以演化與重構，並遵循這些服務的設計原則、問題場景以及應用的約束。在我看來，這些內容纔是書中的閃光點。

除此之外，本書還詳細地討論瞭其中有關腳手架、構建過程和本地工程化服務等現實中的工程實踐所得，並為這些實踐構畫瞭一個參考模型。這使得本書提供瞭大量前端工程師可藉鑒、參考並投之於生産實作的最佳實踐。我想，作為結果，這些實踐的優劣得失尚待時間驗證，而作者在這一過程中的分析與觀點，也可待業界指正評點。

而我所願者，亦在讀者能與我一道，在技術之外多做一點點觀察。

周愛民

2017.11

前言

前端工程師這一崗位最初被獨立分化齣來專注於網頁樣式（CSS）的製作，目的是為瞭令Web開發者將更多的精力投入負責的業務邏輯中。然而隨著Web技術的發展以及PC、移動智能終端設備性能和功能的提升，用戶對於網站的需求也不斷增加。市場的需求促進技術的革新，對於前端工程師的要求早已不僅僅是編寫CSS瞭。資源的多樣性和邏輯的復雜性一度令前端開發工作異常煩瑣且難以維護，工作效率的降低直接導緻Web産品的迭代速度變慢，前端工程化便是在此時代背景下應運而生的。

事實上，前端工程化目前的形態和生態仍然處於非常原始的階段。每個團隊甚至每個人由於存在研究領域（比如業務層和框架層）和業務類型（比如Google Map與淘寶）的差異，從而對前端工程化有不同的需求和定位。本書將前端工程化解讀為一係列規範和流程的集閤，它不是一個框架或者工具，聚焦的不是某個垂直的研究領域或者特殊的業務類型，而是一種可演化、可擴展的服務，服務的目標是解決前端開發以及前後端協作開發過程中的難點和痛點問題，涵蓋項目的起始、開發、測試以及部署環節。工具是前端工程化的實現媒介，規範是工程化的指導方針，工作流程是工程化的外在錶現形式以及約束規範的載體。

本書通過解析一個Web項目迭代過程中前端開發者麵臨的諸多問題，從工程化的角度給齣對應的解決方案，最終將各個環節串聯為完整的工作流。希望讀者通過閱讀本書可以對前端工程化要解決的問題有大緻的瞭解，從而能夠對讀者自行實現工程化方案有所幫助。

目標讀者

本書的主要目標讀者是對前端工程化有一定理解和實踐的中高級前端工程師，同樣適用於對前端工程化感興趣的服務器端開發者以及運維人員。本書假設讀者熟悉Web站點的基本工作原理，尤其是前端與服務器端之間的協作流程，並且對HTTP協議、異步通信、模塊化等知識有深入的理解。

示例代碼

本書選取瞭一個簡易的前端工程化解決方案Boi作為示例，這並不是一個完整形態的解決方案，但是它的許多理念可以作為論證本書觀點的參考。讀者可以從GitHub上獲取其源碼：https://github.com/boijs/boi。

內容概覽

本書第1章以前端工程師從無到有直至發展至今的曆程作為後續內容的起始。從曆史中我們提煉齣前端開發人員在一個Web項目迭代周期各個階段麵臨的諸多問題，這些問題是前端工程化誕生的催化劑，也是指導工程方案設計的本源。之後，我們會按照Web項目從起始到發布的流程分彆介紹前端工程化在各個階段的需求和功能設計，比如腳手架在項目初期減少瞭重復的體力操作並且降低瞭業務框架學習成本；構建係統從編程語言、優化和部署 3 個角度解決瞭前端開發語言內在的缺陷以及由宿主客戶端特性引起的開發和生産環境之間的差異性；本地開發服務器提供瞭前後端並行開發的平颱；部署功能權衡速度、協作和安全，把控著Web産品上綫前的最後一道關卡。最後將這些功能模塊閤理地串聯為完整的工作流，便是前端工程化的完整外在形態。

前端工程師的定位在不同的年代甚至不同的團隊中存在著巨大的差異，即使僅以目前的時間節點為標準也難以給前端工程師一個絕對明確的定義。崗位職責的變化促進瞭工程體係的演進，所以本書在最後的章節中闡述瞭一些對前端工程師未來定位的思考，同時探討瞭與之對應的前端工程體係的演進形式。

以下是分章節介紹：

· 第1章 前端工程簡史 講述前端工程師的發展史、在團隊中的定位，以及前後端分離和前端工程化的進化曆程與基本形態。

· 第2章 腳手架 講述作為前端項目起始階段取代煩瑣人工操作的腳手架必須具備的要素以及本質，通過剖析目前市麵上的經典案例講解實現腳手架過程中需要考慮的要點以及如何集成Yeoman到工程化方案中。

· 第3章 構建 講述構建係統麵臨的問題以及對應的解決方案。構建是前端工程體係中功能最多、最復雜的模塊，也是串聯本地開發服務器、部署的關鍵，是實現工作流的核心模塊。

· 第4章 本地開發服務器 講述如何以Mock服務實現前後端並行開發，以及配閤動態構建進一步提升前端工程師的開發效率。

· 第5章 部署 講述部署功能如何權衡速度、協作和安全3個重要原則，以及前端靜態資源特殊的部署策略。

· 第6章 工作流 講述如何將既有的功能串聯成完整的工作流。以速度見長的本地工作流和注重嚴謹的雲平颱工作流，兩者各有優劣，適用於不同需求和不同規模的團隊。

· 第7章 前端工程化的未來 講述前端工程師如何選擇進階的方嚮以便適應未來的變化。前端工程化是服務於前端開發的，前端工程師定位的改變必然會引起工程化方案的調整。本章通過分析未來工程化不變和可變的方麵，探討前端工程化未來的錶現形式。

“前端工程化係列”叢書

本書是“前端工程化係列”叢書之一，著重講述輔助性質的工程體係設計和實踐過程。前端工程化可以簡單地理解為前端架構與工程體係的綜閤體，兩者相輔相成。本係列叢書的後續作品將從綜閤的角度深層剖析架構與體係之間的關聯及融閤，講述如何從宏觀的角度打造閤理的前端工程化生態。感興趣的讀者可以關注本係列叢書的相關動態。

聯係作者

如果您在閱讀過程中有任何問題，可以發送郵件到作者的個人郵箱：zjp0432@163.com。

緻謝

感謝我的同事和領導在我創作本書期間給予的建議和支持。特彆感謝我曾經的技術領導元亮，在與他共事期間我於前端工程領域的探索和研究得到瞭充分的空間和資源。

感謝電子工業齣版社博文視點的編輯付睿，她在編輯和審校本書期間提齣瞭寶貴的意見。

最後，感謝我的朋友、父母以及妻子劉女士在我創作本書期間給予的空間和支持。

讀者服務

輕鬆注冊成為博文視點社區用戶（www.broadview.com.cn），掃碼直達本書頁麵。

· 提交勘誤：您對書中內容的修改意見可在 提交勘誤 處提交，若被采納，將獲贈博文視點社區積分（在您購買電子書時，積分可用來抵扣相應金額）。

· 交流互動：在頁麵下方 讀者評論 處留下您的疑問或觀點，與我們和其他讀者一同學習交流。

頁麵入口：http://www.broadview.com.cn/33090

有些書的質量還可以，價格有些實在太貴瞭

正版

書還沒看，等過段時間看完後再追加評論吧，好不好

很好，活動給力

很好的書，質量很好，慢慢看

平常原價買六七十一本，現在三本纔一百，放到單位看，很好。

質量一般，工程化範圍比較狹隘

偏重理論，不是很適閤中級看，我買給我徒弟的。

前前後後做前端有段時間瞭，沒有太係統的知識，挺好的一本書