如果你不了解一個(gè)人的過(guò)去策治，那你根本不會(huì)明白他／她為何是現(xiàn)在的樣子泡一。所以，在開(kāi)始聊前端工程化之前，讓我們先來(lái)回顧下前端的過(guò)去二拐。前端的發(fā)展可以總結(jié)為三個(gè)階段：
后端附屬物
可以說(shuō)瀏覽器的誕生孕育了前端服鹅，而前端誕生之初更多的是作為后端的附屬物。在我剛接觸前端時(shí)百新，我其實(shí)先學(xué)的php企软。那時(shí)候前后端是不分離的，前端用來(lái)寫(xiě)樣式和模版yi以及js動(dòng)效然后交由后端渲染及輸出饭望。所以整個(gè)過(guò)程是由后端主導(dǎo)的仗哨，前端還只是玩具。 那這時(shí)候會(huì)有工程化嗎铅辞？答案是肯定的厌漂，任何軟件工程都需要工程化，只是前端尚未獨(dú)立成一項(xiàng)工程巷挥，還談不上工程化桩卵。而后端早就作為一項(xiàng)成熟的軟件工程，有著各種工程化的實(shí)現(xiàn)倍宾。
前后端分離
隨著ajax等技術(shù)以及nodejs語(yǔ)言的誕生雏节，前后端開(kāi)始出現(xiàn)分離，前端開(kāi)始接手模版渲染的工作高职，而后端則更專注于接口等服務(wù)的提供钩乍。分離之后，前端得到了解放怔锌，眾多出色的框架相繼誕生寥粹，如backbone, angular, reactjs, vue等優(yōu)秀框架。隨著前端自主性增強(qiáng)埃元，前端慢慢具備了作為獨(dú)立一項(xiàng)軟件工程的條件涝涤，工程化變成了必要。于是基于nodejs實(shí)現(xiàn)的開(kāi)源工程化工具開(kāi)始出現(xiàn)岛杀，如grunt, gulp, webpack等阔拳。當(dāng)然像google，facebook等大公司早就有前端工程化方案类嗤，只是沒(méi)有對(duì)外開(kāi)源糊肠。
入侵全端
09年，天才的Ryan Dahl給前端界帶來(lái)了nodejs遗锣，賦予了JS在后端運(yùn)行的能力以及開(kāi)發(fā)客戶端的能力货裹。而HybridApp，React Native等技術(shù)又讓前端擁有開(kāi)發(fā)移動(dòng)APP的能
力精偿。
至此弧圆，前端已經(jīng)演進(jìn)成一項(xiàng)成熟的軟件工程赋兵，即所謂的前端工程化。
軟件工程
前端發(fā)展成了一項(xiàng)軟件工程搔预，那什么是軟件工程呢毡惜？我們先來(lái)看下它的定義：
軟件工程是一門(mén)研究用工程化方法構(gòu)建和維護(hù)有效的、實(shí)用的和高質(zhì)量的軟件的學(xué)科斯撮。它涉及程序設(shè)計(jì)語(yǔ)言、數(shù)據(jù)庫(kù)扶叉、軟件開(kāi)發(fā)工具勿锅、系統(tǒng)平臺(tái)、標(biāo)準(zhǔn)枣氧、設(shè)計(jì)模式等方面溢十。
所以，我認(rèn)為前端工程化就是以工程化方法構(gòu)建和維護(hù)有效达吞、實(shí)用和高質(zhì)量的前端應(yīng)用张弛。
流程
?上面說(shuō)了一大堆理論，那么怎么實(shí)現(xiàn)工程化呢酪劫？相信很多人腦中會(huì)冒出grunt吞鸭、gulp、webpack這些打包工具以及一堆腳手架覆糟。但是前端工程化絕不是等同于一堆腳手架工具刻剥，這些腳手架工具只是為了實(shí)現(xiàn)工程化，即構(gòu)建和維護(hù)前端應(yīng)用滩字。軟件交付一般流程如下：
每個(gè)階段都需要用工程化的方法去實(shí)現(xiàn)造虏，這又涉及到前端開(kāi)發(fā)所用到的技術(shù)。
前端技術(shù)
總結(jié)起來(lái)麦箍，前端歸根到底也就是html漓藕、css、js這三項(xiàng)技術(shù)挟裂。但在前端的演進(jìn)過(guò)程中享钞，發(fā)展出了這些基本技術(shù)的衍生品。如jsx是recatjs發(fā)明的對(duì)html語(yǔ)法的擴(kuò)展话瞧；sass是對(duì)css語(yǔ)法的擴(kuò)展嫩与；typescript是js語(yǔ)言的變種。這些衍生物最終還是需要還原成最基本的html交排，css划滋，js后前端應(yīng)用才能運(yùn)行起來(lái)。這些都需要一些工具來(lái)輔助處理埃篓，如bable处坪，postcss等，這些工具是我們構(gòu)建前端應(yīng)用必不可少的。而grunt同窘、gulp玄帕、webpack則可以幫助我們集成這些工具，方便前端開(kāi)發(fā)調(diào)試想邦，并構(gòu)建出最終可以用于生產(chǎn)環(huán)境的高質(zhì)量應(yīng)用裤纹。當(dāng)然構(gòu)建只是工程化的一部分，軟件交付后還需要持續(xù)維護(hù)丧没。像日志上報(bào)鹰椒、異常監(jiān)控及恢復(fù)等都措施都要進(jìn)一步跟進(jìn)。
總結(jié)
我認(rèn)為前端工程化就是用工程化方法構(gòu)建和維護(hù)有效的呕童、實(shí)用的和高質(zhì)量的前端應(yīng)用漆际。
