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

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

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

目標(biāo)讀者

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

示例代碼

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

內(nèi)容概覽

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

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

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

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

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

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

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

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

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

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

前端工程化系列叢書(shū)

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

聯(lián)系作者

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

致謝

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

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

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