“前段工程化”是前端開發(fā)領(lǐng)域非常重要的一環(huán)，本節(jié)重點(diǎn)介紹前端工程化體系的各個(gè)環(huán)節(jié)的設(shè)計(jì)要點(diǎn)和實(shí)踐經(jīng)驗(yàn)，引導(dǎo)大家深入思考并積極實(shí)踐。
對象：
- 有一定理解和實(shí)踐的中高級前端工程師
- 對前端工程化感興趣的服務(wù)端開發(fā)者即運(yùn)維人員
簡介
前端工程化包含一系列規(guī)劃和流程肮雨，可提升前端工程師的工作效率，加快web開發(fā)迭代速度箱玷，是現(xiàn)在前端開發(fā)領(lǐng)域中非常重要的一環(huán)怨规。
前端工程體系是一種服務(wù)， 以項(xiàng)目迭代過程中的前端開發(fā)為主要服務(wù)對象锡足，涉及開發(fā)波丰、構(gòu)建、部署等環(huán)節(jié)舶得。
前言
前端工程化的誕生背景
前端工程師這一崗位最初被獨(dú)立分化出來專注于網(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)品的迭代速度變慢捻撑，前端工程化便是在此時(shí)代背景下應(yīng)用而生的磨隘。
前端工程化的現(xiàn)狀
事實(shí)上缤底，前端工程化目前的形態(tài)和生態(tài)仍然處于非常原始的額階段，每個(gè)團(tuán)隊(duì)甚至個(gè)人由于存在研究領(lǐng)域（比如業(yè)務(wù)層和框架層）和業(yè)務(wù)類型的差異番捂，從而對前端工程化有著不同的需求和定位个唧。
什么是前端工程化
前端工程化是一系列的規(guī)范和流程的集合，不是一個(gè)框架或工具设预，聚焦的不是某個(gè)垂直的研究領(lǐng)域或特殊的業(yè)務(wù)類型徙歼，而是一種可演化、可擴(kuò)展的服務(wù)鳖枕，服務(wù)的目標(biāo)是解決前端開發(fā)以及前后端協(xié)作開發(fā)過程中的難點(diǎn)和痛點(diǎn)問題魄梯，涵蓋項(xiàng)目的起始、開發(fā)宾符、測試酿秸、部署環(huán)節(jié)。工具是前端工程化的實(shí)現(xiàn)媒介魏烫，規(guī)范是前端工程化的指導(dǎo)方針辣苏，工作流程是前端工程化的外在表現(xiàn)形式以及約束規(guī)范的載體。
前端工程化簡史
“前端工程化”這個(gè)概念是在近兩年被廣泛地提及和討論哄褒，究其原因稀蟋，是前端工程師所負(fù)責(zé)的客戶端功能邏輯在不斷復(fù)雜化。如果說互聯(lián)網(wǎng)時(shí)代是前端工程師的舞臺可能有些夸大其詞呐赡，但前端工程師絕對撐起了互聯(lián)網(wǎng)應(yīng)用開發(fā)的“半壁江山”退客。傳統(tǒng)網(wǎng)站、手機(jī)應(yīng)用罚舱、桌面應(yīng)用井辜、微信小程序等，前端工程師已經(jīng)不是幾年前被戲謔的“切圖仔”了管闷。“寫demo窃肠，套模板”模式已經(jīng)嚴(yán)重拖累了前端開發(fā)以及整體團(tuán)隊(duì)的開發(fā)效率包个。在這樣的時(shí)代背景下，前端工程化便應(yīng)用而生了冤留。
問題
- 當(dāng)前市場環(huán)境下對前端工程師的技能要求是什么碧囊？
- 前端開發(fā)以及前后端開發(fā)中有哪些問題需要從工程化的角度解決？
目標(biāo)
我們將沿著前端工程化從無到右的進(jìn)化歷程纤怒，了解前端工程化帶給前端開發(fā)模式的改革和效率的提升糯而，從而總結(jié)出前端工程化應(yīng)由的形態(tài)。以Node.js為底層平臺泊窘，以webpack為構(gòu)建體系核心打造一套完整的前端工程解決方案熄驼。
大綱
- 前端工程師的基本素養(yǎng)
- Node.js帶給前端的機(jī)遇和挑戰(zhàn)
- 前后端分離的必要性和基本原則
- 前端工程化的進(jìn)化歷程和基本模式
- 最流程的前端構(gòu)建工具 webpack
招聘市場上有大量的公司對前端工程師求賢若渴像寒，但同時(shí)求職市場上也有大量的前端工程師在“求職若渴”。造成這兩種局面的原因是瓜贾，用人單位與求職者對前端工程師的技能需求以及定位存在差異诺祸。
到底什么是前端工程師呢？是被人誤解的工作很簡單的“切圖仔”祭芦，還是包攬客戶端和中間層的“大前端”呢筷笨？應(yīng)該怎樣定位前端工程師這個(gè)崗位呢？讓我們從前端的發(fā)展歷史中找出答案龟劲。
前端工程師的發(fā)展歷史
- 1990年胃夏，Tim Berners Lee發(fā)明了世界上第一個(gè)網(wǎng)頁瀏覽器 WorldWideWeb。
- 1995年昌跌，Brendan Eich僅用10天完成了第一版網(wǎng)頁腳本語言JS的設(shè)計(jì)仰禀。
在網(wǎng)絡(luò)條件與計(jì)算機(jī)設(shè)備比較了落后的年代，網(wǎng)頁基本上靜態(tài)的避矢。對網(wǎng)頁腳本語言功能呢的最初設(shè)想僅僅是能夠在瀏覽器中完成一些簡單的校驗(yàn)悼瘾，比如表單驗(yàn)證。所以網(wǎng)頁腳本語言的特點(diǎn)是：功能簡單审胸、語法簡潔亥宿、易于學(xué)習(xí)、易于部署砂沛。那個(gè)年代的web應(yīng)用是重服務(wù)端烫扼、輕客戶端的模式，web開發(fā)人員以服務(wù)器端為主碍庵，同時(shí)兼具瀏覽器端映企，沒有所謂的前端工程師。
- 2005年静浴，AJAX技術(shù)問世令靜態(tài)網(wǎng)頁“動”了起來堰氓，異步請求和局部刷新徹底改變了網(wǎng)頁的交互模式。
同時(shí)網(wǎng)速與個(gè)人計(jì)算機(jī)的普及給網(wǎng)站帶來了更多用戶苹享，用戶對網(wǎng)站的需求也越來越多双絮。需求與技術(shù)的同步增長讓早期的重服務(wù)器端、輕客戶端的天平向客戶端有所傾斜得问，也就是從那個(gè)時(shí)候開始出現(xiàn)了第一批專職的前端工程師囤攀。這批工程師相對于服務(wù)器端工程師的優(yōu)勢主要體現(xiàn)在對交互與UI的敏感度和專業(yè)度上。所以第一批前端工程師中有很大一部分是設(shè)計(jì)師出身宫纬，導(dǎo)致前端工程師有了一個(gè)很不相稱的稱呼：美工焚挠。不可否認(rèn)，第一批前端工程師主要負(fù)責(zé)的是CSS和HTML的開發(fā)漓骚，雖然有了AJAX技術(shù)蝌衔，但受限于JS引擎的性能榛泛，瀏覽器端的功能邏輯仍然十分簡單。
- 2008年胚委，Google退出了全新的JS引擎V8挟鸠，采用JIT技術(shù)解釋編譯JS代碼，大大提高了JS的運(yùn)行性能亩冬。
隨后艘希，Netscape的SpiderMonkey和Apple的JSCore也緊隨V8，加入了JS引擎的性能追逐戰(zhàn)硅急。JS引擎性能的提升讓許多早期不能在瀏覽器端實(shí)現(xiàn)的功能得以實(shí)現(xiàn)覆享，瀏覽器能夠承載幾千行甚至幾萬行的邏輯，web應(yīng)用服務(wù)器端與客戶端的天平再次向客戶端一方發(fā)生傾斜营袜。業(yè)務(wù)開始提倡REST(Representational State Transfer撒顿，表述性狀態(tài)傳遞)風(fēng)格的web服務(wù)API與SPA（Single Page Application， 單頁應(yīng)用）風(fēng)格的客戶端荚板。前端工程師承載起了客戶端的交互凤壁、UI和邏輯的開發(fā)，工作職責(zé)進(jìn)一步加重跪另。
- 2009年拧抖，Node.js的問世在前端界引起了軒然大波。
Node.js將JS語言帶到了服務(wù)器端開發(fā)領(lǐng)域免绿，到目前業(yè)務(wù)很多公司將Node.js應(yīng)用到企業(yè)級產(chǎn)品中唧席。雖然Node.js仍然沒有像PHP、Java等傳統(tǒng)服務(wù)端語言一樣普及嘲驾，但由它引發(fā)的“大前端”模式已經(jīng)在web開發(fā)領(lǐng)域中蔓延淌哟。Node.js對前端生態(tài)的促進(jìn)，以及對同構(gòu)開發(fā)的支持是PHP辽故、Java等語言遠(yuǎn)不能比及的徒仓。
“大前端”模式下的前端工程師跨越了之前瀏覽器與服務(wù)器之間看似難以逾越的鴻溝，踏入了web服務(wù)端開發(fā)領(lǐng)域誊垢。
前端工程師的基本素養(yǎng)
前端工程師的技能棧
從最初重交互/UI輕JS的開發(fā)模式蓬衡，到交互、UI彤枢、邏輯一把抓，再到“大前端”的服務(wù)器端筒饰、客戶端全掌控缴啡，是前端工程師工作內(nèi)容和工作職責(zé)不斷擴(kuò)寬。從前端工程師的發(fā)展歷史中瓷们，我們可以總結(jié)出前端工程師的技能棧业栅。
- 硬技能
HTML/CSS/JS秒咐， 這三項(xiàng)是前端工程師從蠻荒年代發(fā)展到至今從未脫離的核心技術(shù)。
HTML/CSS/JS俗稱“前端工程師的三把刷子”碘裕，其實(shí)將HTML/CSS與JS放在一起討論并不合適携取，HTML/CSS作為標(biāo)記類語言，只有在瀏覽器環(huán)境或類瀏覽器環(huán)境才會被識別解析帮孔，所以可認(rèn)為這兩者是DSL（Domain Specific Language雷滋，領(lǐng)域特定語言）。
而JS與HTML/CSS的性能不同文兢，雖然不如C++晤斩、Java等高級語言那樣嚴(yán)謹(jǐn)，但本質(zhì)上是一門編程語言姆坚。同其他的編程語言一樣澳泵，對于JS掌握其語法和特性是最基本的。但這只是應(yīng)用能力兼呵，最終考量的仍然是計(jì)算機(jī)體系的理論知識兔辅。所以數(shù)據(jù)結(jié)構(gòu)、算法击喂、軟件工程等基礎(chǔ)知識對于前端工程師同樣重要维苔，這些知識是能夠決定一個(gè)前端工程師的上限。當(dāng)然茫负，也不僅僅是針對前端工程師而言蕉鸳。
HTML/CSS/JS三者代表前端工程師能力的三個(gè)方面，三者相互耦合并非獨(dú)立忍法。而其中任何一項(xiàng)都是一個(gè)龐大的技能樹潮尝，可細(xì)分出很多子技能。
對于HTML饿序，要掌握各個(gè)標(biāo)簽的合理使用和基本的WebAPI勉失。
對于CSS要理解各屬性的工作模式的前提下能夠綜合使用，給出合理的解決方案原探，由于瀏覽器的差異乱凿，還必須掌握必要的hack。雖然hack方案最終都會被歷史的塵埃掩埋咽弦，但目前仍然無法避免兼容性的問題徒蟆。
對于JS與其他任何一門編程語言一樣，除了基礎(chǔ)語法有基本的應(yīng)用編程能力之外型型，還必須具備良好的抽象能力和架構(gòu)能力段审。
- 軟技能
用戶體驗(yàn)，用戶體驗(yàn)是web產(chǎn)品吸引用戶的第一道菜闹蒜，也是前端成功是工作產(chǎn)出的重點(diǎn)寺枉。
前端工程師的產(chǎn)出是直接面向用戶的抑淫，良好的用戶體驗(yàn)是web產(chǎn)品的基本要素。這里的用戶體驗(yàn)并非指的是交互方案和視覺設(shè)計(jì)姥闪，雖然這是用戶體驗(yàn)的一部分始苇。此處討論的用戶體驗(yàn)包括但不限于：
- 保證內(nèi)容的快速展現(xiàn)，減少用戶等待時(shí)間筐喳。
- 保證操作的流暢度
- 移動設(shè)備盡量減少設(shè)備的耗電量
...
總結(jié)起來其實(shí)就兩個(gè)字“性能”催式。若果說按時(shí)完成了業(yè)務(wù)的所有需求是保證了量，那么提升產(chǎn)品的性能就是保證了質(zhì)疏唾，兩者缺一不可蓄氧。
再談?wù)凧S
JS設(shè)計(jì)之初的應(yīng)用場景是表單驗(yàn)證，如需要驗(yàn)證賬戶和密碼的表單槐脏，用戶若沒有輸入就發(fā)送會發(fā)送一個(gè)請求到服務(wù)器端進(jìn)行驗(yàn)證喉童。雖然這在今天的網(wǎng)絡(luò)技術(shù)下么什么大不了，但在網(wǎng)絡(luò)速度慢且上網(wǎng)昂貴的年代顿天，這樣的代價(jià)是非常巨大的堂氯，因?yàn)橛脩舯仨毜却?wù)端處理后才能得到反饋。
JS在瀏覽器發(fā)送請求前驗(yàn)證內(nèi)容的有效性牌废，避免了無效的請求咽白，即減輕了服務(wù)器的壓力又節(jié)省了成本，同時(shí)減少了用戶等待的時(shí)間鸟缕，提升了用戶體驗(yàn)晶框。可見JS設(shè)計(jì)的初衷便將用戶體驗(yàn)作為重要的考慮因素懂从。
在現(xiàn)今快節(jié)奏下授段，用戶對產(chǎn)品的需求也傾向于快速化：快速展示、快速迭代番甩。
用戶不想為了看一條新聞而去下載一款新聞軟件侵贵，他們希望打開網(wǎng)站即可以快速查看。web蟾皮本身就具備快速的基因缘薛，性能優(yōu)化的最終目標(biāo)也是保證“足夠快”窍育。所以前端工程師不僅要求熟練地使用基本的開發(fā)技能，還必須具備性能優(yōu)化的意思和技能宴胧。
- 擴(kuò)展技能
Node.js漱抓，此處的Node.js并非指Node.js本身而是Node.js所代表的web服務(wù)端知識。
前端工程師是承載用戶層所有功能的資源產(chǎn)出者恕齐，不僅是客戶端最終呈現(xiàn)給用的HTML/CSS/JS等資源成品辽旋，而且還包括這些資源從0開始到最終產(chǎn)出的生產(chǎn)流水線所涵蓋的所有環(huán)節(jié)。
