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

事實上，前端工程化目前的形態(tài)和生態(tài)仍然處于非常原始的階段。每個團(tuán)隊甚至每個人由于存在研究領(lǐng)域（比如業(yè)務(wù)層和框架層）和業(yè)務(wù)類型（比如Google Map與淘寶）的差異，從而對前端工程化有不同的需求和定位。本書將前端工程化解讀為一系列規(guī)范和流程的集合，它不是一個框架或者工具，聚焦的不是某個垂直的研究領(lǐng)域或者特殊的業(yè)務(wù)類型，而是一種可演化、可擴(kuò)展的服務(wù)，服務(wù)的目標(biāo)是解決前端開發(fā)以及前后端協(xié)作開發(fā)過程中的難點和痛點問題，涵蓋項目的起始、開發(fā)、測試以及部署環(huán)節(jié)。工具是前端工程化的實現(xiàn)媒介，規(guī)范是工程化的指導(dǎo)方針，工作流程是工程化的外在表現(xiàn)形式以及約束規(guī)范的載體。

本書通過解析一個Web項目迭代過程中前端開發(fā)者面臨的諸多問題，從工程化的角度給出對應(yīng)的解決方案，最終將各個環(huán)節(jié)串聯(lián)為完整的工作流。希望讀者通過閱讀本書可以對前端工程化要解決的問題有大致的了解，從而能夠?qū)ψx者自行實現(xiàn)工程化方案有所幫助。

目標(biāo)讀者

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

示例代碼

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

內(nèi)容概覽

本書第1章以前端工程師從無到有直至發(fā)展至今的歷程作為后續(xù)內(nèi)容的起始。從歷史中我們提煉出前端開發(fā)人員在一個Web項目迭代周期各個階段面臨的諸多問題，這些問題是前端工程化誕生的催化劑，也是指導(dǎo)工程方案設(shè)計的本源。之后，我們會按照Web項目從起始到發(fā)布的流程分別介紹前端工程化在各個階段的需求和功能設(shè)計，比如腳手架在項目初期減少了重復(fù)的體力操作并且降低了業(yè)務(wù)框架學(xué)習(xí)成本；構(gòu)建系統(tǒng)從編程語言、優(yōu)化和部署 3 個角度解決了前端開發(fā)語言內(nèi)在的缺陷以及由宿主客戶端特性引起的開發(fā)和生產(chǎn)環(huán)境之間的差異性；本地開發(fā)服務(wù)器提供了前后端并行開發(fā)的平臺；部署功能權(quán)衡速度、協(xié)作和安全，把控著Web產(chǎn)品上線前的最后一道關(guān)卡。最后將這些功能模塊合理地串聯(lián)為完整的工作流，便是前端工程化的完整外在形態(tài)。

前端工程師的定位在不同的年代甚至不同的團(tuán)隊中存在著巨大的差異，即使僅以目前的時間節(jié)點為標(biāo)準(zhǔn)也難以給前端工程師一個絕對明確的定義。崗位職責(zé)的變化促進(jìn)了工程體系的演進(jìn)，所以本書在最后的章節(jié)中闡述了一些對前端工程師未來定位的思考，同時探討了與之對應(yīng)的前端工程體系的演進(jìn)形式。

以下是分章節(jié)介紹：

第1章 前端工程簡史 講述前端工程師的發(fā)展史、在團(tuán)隊中的定位，以及前后端分離和前端工程化的進(jìn)化歷程與基本形態(tài)。

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

第3章 構(gòu)建 講述構(gòu)建系統(tǒng)面臨的問題以及對應(yīng)的解決方案。構(gòu)建是前端工程體系中功能最多、最復(fù)雜的模塊，也是串聯(lián)本地開發(fā)服務(wù)器、部署的關(guān)鍵，是實現(xiàn)工作流的核心模塊。

第4章 本地開發(fā)服務(wù)器 講述如何以Mock服務(wù)實現(xiàn)前后端并行開發(fā)，以及配合動態(tài)構(gòu)建進(jìn)一步提升前端工程師的開發(fā)效率。

第5章 部署 講述部署功能如何權(quán)衡速度、協(xié)作和安全3個重要原則，以及前端靜態(tài)資源特殊的部署策略。

第6章 工作流 講述如何將既有的功能串聯(lián)成完整的工作流。以速度見長的本地工作流和注重嚴(yán)謹(jǐn)?shù)脑破脚_工作流，兩者各有優(yōu)劣，適用于不同需求和不同規(guī)模的團(tuán)隊。

第7章 前端工程化的未來 講述前端工程師如何選擇進(jìn)階的方向以便適應(yīng)未來的變化。前端工程化是服務(wù)于前端開發(fā)的，前端工程師定位的改變必然會引起工程化方案的調(diào)整。本章通過分析未來工程化不變和可變的方面，探討前端工程化未來的表現(xiàn)形式。

前端工程化系列叢書

本書是前端工程化系列叢書之一，著重講述輔助性質(zhì)的工程體系設(shè)計和實踐過程。前端工程化可以簡單地理解為前端架構(gòu)與工程體系的綜合體，兩者相輔相成。本系列叢書的后續(xù)作品將從綜合的角度深層剖析架構(gòu)與體系之間的關(guān)聯(lián)及融合，講述如何從宏觀的角度打造合理的前端工程化生態(tài)。感興趣的讀者可以關(guān)注本系列叢書的相關(guān)動態(tài)。

聯(lián)系作者

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

致謝

感謝我的同事和領(lǐng)導(dǎo)在我創(chuàng)作本書期間給予的建議和支持。特別感謝我曾經(jīng)的技術(shù)領(lǐng)導(dǎo)元亮，在與他共事期間我于前端工程領(lǐng)域的探索和研究得到了充分的空間和資源。

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

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