我眼裏的前端工程化

若是你不瞭解一我的的過去，那你根本不會明白他／她爲什麼是如今的樣子。因此，在開始聊前端工程化以前，讓咱們先來回顧下前端的過去。前端的發展能夠總結爲三個階段：

後端附屬物

能夠說瀏覽器的誕生孕育了前端，而前端誕生之初更多的是做爲後端的附屬物。在我剛接觸前端時，我其實先學的php。那時候先後端是不分離的，前端用來寫樣式和模版yi以及js動效而後交由後端渲染及輸出。因此整個過程是由後端主導的，前端還只是玩具。 那這時候會有工程化嗎？答案是確定的，任何軟件工程都須要工程化，只是前端還沒有獨立成一項工程，還談不上工程化。然後端早就做爲一項成熟的軟件工程，有着各類工程化的實現。

先後端分離

隨着ajax等技術以及nodejs語言的誕生，先後端開始出現分離，前端開始接手模版渲染的工做，然後端則更專一於接口等服務的提供。分離以後，前端獲得瞭解放，衆多出色的框架相繼誕生，如backbone, angular, reactjs, vue等優秀框架。隨着前端自主性加強，前端慢慢具有了做爲獨立一項軟件工程的條件，工程化變成了必要。因而基於nodejs實現的開源工程化工具開始出現，如grunt, gulp, webpack等。固然像google，facebook等大公司早就有前端工程化方案，只是沒有對外開源。

入侵全端

09年，天才的Ryan Dahl給前端界帶來了nodejs，賦予了JS在後端運行的能力以及開發客戶端的能力。而HybridApp，React Native等技術又讓前端擁有開發移動APP的能

力。

至此，前端已經演進成一項成熟的軟件工程，即所謂的前端工程化。

軟件工程

前端發展成了一項軟件工程，那什麼是軟件工程呢？咱們先來看下它的定義：

軟件工程是一門研究用工程化方法構建和維護有效的、實用的和高質量的軟件的學科。它涉及程序設計語言、數據庫、軟件開發工具、系統平臺、標準、設計模式等方面。

因此，我認爲前端工程化就是以工程化方法構建和維護有效、實用和高質量的前端應用。

流程

 上面說了一大堆理論，那麼怎麼實現工程化呢？相信不少人腦中會冒出grunt、gulp、webpack這些打包工具以及一堆腳手架。可是前端工程化毫不是等同於一堆腳手架工具，這些腳手架工具只是爲了實現工程化，即構建和維護前端應用。軟件交付通常流程以下：

 

每一個階段都須要用工程化的方法去實現，這又涉及到前端開發所用到的技術。

前端技術

 

總結起來，前端歸根到底也就是html、css、js這三項技術。但在前端的演進過程當中，發展出了這些基本技術的衍生品。如jsx是recatjs發明的對html語法的擴展；sass是對css語法的擴展；typescript是js語言的變種。這些衍生物最終仍是須要還原成最基本的html，css，js後前端應用才能運行起來。這些都須要一些工具來輔助處理，如bable，postcss等，這些工具是咱們構建前端應用必不可少的。而grunt、gulp、webpack則能夠幫助咱們集成這些工具，方便前端開發調試，並構建出最終能夠用於生產環境的高質量應用。固然構建只是工程化的一部分，軟件交付後還須要持續維護。像日誌上報、異常監控及恢復等都措施都要進一步跟進。

 

總結

我認爲前端工程化就是用工程化方法構建和維護有效的、實用的和高質量的前端應用。