具體描述
産品特色
編輯推薦
適讀人群 ：本書適閤對前端工程化有一定理解和實踐的中高級前端工程師閱讀，同樣適閤對前端工程化感興趣的服務器端開發者以及運維人員閱讀。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
用戶評價
這本書的精髓，在於它不僅僅停留在“術”的層麵，更是深入到“道”的層麵，為前端工程化提供瞭一套完整的“體係設計”思路。我一直覺得，很多前端書籍都過於強調具體工具的使用，而忽略瞭背後的設計原則和架構思想。這本書則完全不同，它從宏觀的視角齣發，為我們勾勒齣瞭一個完整、可擴展的前端工程化藍圖。我尤其欣賞它在“項目架構與演進”部分的內容。 它不隻是告訴你如何搭建一個項目，更是教你如何去設計一個能夠適應未來變化的項目架構。書中關於“微前端”、“服務化”等前沿概念的介紹，以及它們在實際場景中的應用，都讓我大開眼界。我之前對微前端的概念隻是聽說過，但對它如何實現、麵臨的挑戰以及如何選擇閤適的方案，一直感到睏惑。這本書則給予瞭非常詳盡的解答，讓我能夠更清晰地認識到微前端的價值和落地路徑。它讓我明白，優秀的前端工程化，不僅僅是為瞭解決當前的問題，更是為瞭構建一個能夠持續發展和演進的健康生態。
評分這本書的內容，絕對是我近幾年來讀過的最實在、最有價值的一本技術書籍。我一直對“前端工程化”這個詞既熟悉又陌生，知道它很重要，但具體包含哪些方麵，如何落地，卻總是模模糊糊。這本書就像一個清晰的路綫圖，把我從混沌中拉瞭齣來。它在“團隊協作與流程建設”這塊的論述，給我帶來瞭巨大的啓發。我一直以為工程化是純粹的技術問題，但這本書讓我認識到，一個高效的前端團隊，離不開良好的協作和流程。 它詳細講解瞭如何通過 CI/CD（持續集成/持續部署）來自動化構建、測試和部署流程，這極大地提高瞭開發效率和發布頻率。我之前對CI/CD的概念隻是模糊的瞭解，但這本書的講解，讓我清晰地看到瞭它在實際項目中的應用，以及它能帶來的實際好處。另外，書中對於“知識沉澱與分享”這塊的強調，也讓我反思瞭很多。一個成熟的工程化體係，必然伴隨著知識的不斷積纍和傳承，而這本書恰恰為我們提供瞭構建這種體係的思路和方法。
評分這本書的內容，可以說是顛覆瞭我對前端開發的一些固有認知。我之前一直以為，前端工程化的重點在於“用好各種工具”，比如Webpack、Babel、ESLint等等。但這本書讓我意識到，工具隻是手段，核心在於“體係”。它強調的是一種思維方式，一種構建高質量前端項目的戰略。書中對於“版本管理”、“灰度發布”、“監控體係”等方麵的論述，讓我看到瞭一個成熟的前端團隊應該具備的視野和能力。 我尤其對書中關於“測試體係”的章節印象深刻。過去我總覺得前端測試是個可有可無的環節，寫測試代碼會拖慢開發速度。但這本書的講解，讓我明白瞭為什麼測試是工程化不可或缺的一部分，以及如何構建一個有效的測試策略，從單元測試、集成測試到端到端測試，都有細緻的講解和案例。它讓我明白，良好的測試體係不僅能提升代碼質量，更能減少後期維護成本，甚至能夠加速開發流程。讀完這部分，我開始重新審視自己項目中的測試現狀，並計劃逐步引入更全麵的測試方案。
評分這本書我真的太愛瞭！作為一個入瞭前端坑幾年，但總覺得瓶頸期的開發者，這本書就像給我指明瞭方嚮的燈塔。我一直覺得前端工程化是個很虛的概念，知道它重要，但具體要怎麼做，從哪裏入手，一直很模糊。這本書的內容，特彆是關於“體係設計”的部分，簡直是把這個龐大的概念拆解得明明白白。它不是那種告訴你“用這個工具能解決XX問題”的書，而是從更宏觀的視角，教你如何構建一個健康、可維護、高性能的前端項目體係。 我特彆喜歡它在講到“模塊化”、“組件化”、“構建優化”這些基礎內容時，不是停留在工具的介紹，而是深入分析瞭背後的設計理念和權衡。比如，講到模塊化時，它會對比不同模塊化方案的優劣，以及在不同場景下如何選擇，甚至會提及一些不常見的但非常有用的實踐。還有在構建優化部分，它不僅僅是羅列各種webpack配置項，而是從打包體積、加載速度、緩存策略等多個維度，給齣瞭非常係統性的思考路徑。讀完這部分，我突然覺得之前那些零散的優化嘗試都變得有理有據瞭，不再是“碰運氣”式的修改瞭。
評分講實話，讀這本書的過程，我時常會停下來思考。它不僅僅是技術手冊，更像是對前端開發本質的一次深度挖掘。我尤其欣賞作者在“代碼規範與質量保障”這塊的論述，它把靜態代碼分析、代碼審查、甚至一些高級的AST（抽象語法樹）應用都講得非常透徹。我之前以為ESLint和Prettier就是規範的全部瞭，但這本書讓我看到瞭更廣闊的天地，比如如何利用AST來自動化一些復雜的代碼檢查和重構，這對我來說是全新的啓發。 書中關於“性能優化”的章節，更是讓我受益匪淺。它不隻是停留在前端加載速度上，還深入到服務端渲染（SSR）、預渲染（Prerendering）、甚至一些瀏覽器底層渲染機製的介紹。我之前做性能優化，很多時候是憑感覺，知道哪裏慢就改哪裏。但這本書給齣瞭一個非常清晰的體係化方法論，從瀑布圖分析到具體的優化點，層層遞進，讓我能夠有針對性地去解決問題，而不是盲目地嘗試。讀完這部分，我感覺自己的性能優化能力得到瞭質的飛躍，能夠更自信地去應對各種性能挑戰。
評分還不錯
評分其實就是告訴一些前端工程化的概念，給齣一個方嚮性的東西，嗯如果想學，比如學習webpack配置，還得看其他更專業的書籍
評分前前後後做前端有段時間瞭，沒有太係統的知識，挺好的一本書
評分繼續在成長道路上前行。
評分講得太少，書太薄，不值這個價。
評分正對前端感興趣的時候，好好學習一下
評分幫助我們理解瞭前端的發展，說的都是概念，實戰性不強!
評分好像都城長安、一定會不會更加
評分正版
相關圖書
本站所有內容均為互聯網搜尋引擎提供的公開搜索信息，本站不存儲任何數據與內容，任何內容與數據均與本站無關，如有需要請聯繫相關搜索引擎包括但不限於百度，google,bing,sogou 等
© 2025 book.teaonline.club All Rights Reserved. 圖書大百科 版權所有