雖然前端工程化的概念興起還沒幾年的時間，但是對于“工程化”這個詞并不是一個新鮮詞了，在其他軟件開發的領域很早就已經有了高度的工程化，例如Web服務端開發。

      這幾年，前端工程化的概念又突然成為了熱點話題了呢？要想講好前端工程化其實并不容易。

      1、前端為什么要工程化？

      在回答前端工程化這個問題之前，我們應該先考慮另外一個問題：前端開發中會不會涉及到業務？再詳細一點，就是前端工程師到底需不需要了解服務端的業務邏輯，再或者說，要不要將一部分服務端的業務邏輯放到前端來實現。這個問題沒有標準的答案，實際上應該屬于工程協作問題，就是誰該干什么的問題。

      最早的前端開發就是實現頁面，頂多再寫寫JS讓頁面可以有交互的特效。但是隨著需求的增加，我們不僅要做Web應用，還要做App、小程序以及各種端。在這種需求日增的情況下，必須得考慮一種新的方式，優化前端的開發工作，例如，解決代碼冗余，項目可維護性，提升版本迭代速度等等一系列的問題。前端工程化的概念也就是在這中情況下被提出了。

      2、實現前端工程化的基礎——前后端分離

      實際上，現在的前端工程化應該還處于早期階段，畢竟前端工程師這個崗位也才誕生沒幾年。在互聯網發展的早期，Web應用很多情況下都是由服務端工程師一肩挑，前端開發頂多是寫寫HTML代碼，實現頁面的布局，然后再把寫好的HTML靜態文件交給后端工程師套模板，因為當時大部分的Web應用都是使用的服務端渲染技術，例如Java的JSP。

      這種傳統模式下的協作開發效率非常低，如果在頁面測試中發現了一個bug，這個bug是由于一個ClassName的值少寫了一個字母，你說這種情況到底是前端工程師的錯，還是后端工程師套模板時的粗心大意呢？畢竟一個網站上有成千上萬個DOM節點，誰也不能保證一行代碼都不會寫錯。再假如，項目上線后發現網頁的實際像素和設計稿上存在1像素的偏差，這個時候就需要由前端工程師重新設計一次HTML靜態頁面，然后再交給后端工程師繼續套模板，等整個流程走完之后，你會發現一個更加嚴重的問題，整個項目中僅僅是1像素的偏差，就有可能要調動整個開發團隊來處理這1像素的問題，極大的浪費了團隊資源。

      上面的問題也僅僅是傳統開發問題中的冰山一角，面對這么多的問題，前后端分離開發也就應運而生了。前后端分離開發，為前端工程化的發展提供了生存的土壤。隨著市場需求的不斷變化，前端開發從傳統的WebPage模式，轉變到WebApp模式，Web產品形態的變化也不斷推動著前端工程師的工作內容發生變化。在應對各種“變化”，前端工程師們也要設計出自己的前端開發“方法論”。

      前端工程化的主要目標就是解放生產力、提高生產效率。通過制定一系列的規范，借助工具和框架解決前端開發以及前后端協作過程中的痛點和難度問題。

      3、如何實施前端工程化？

      明確前后端開發的分工，是實現前后端分離的第一步，也是后面實現前端各種優化方案的基礎。前端工程師主要負責的內容包括：

      靜態資源和動態資源的處理；JavaScript實現前端業務邏輯；HTML模板文件的產出；中間層Web服務，一般由Node.js實現；前端單元測試；前端項目部署；其中，靜態資源包括.js文件、.css文件以及各種格式的圖片、媒體文件等，這些文件不依賴于服務器，只需要在瀏覽器里面解析就可以了；動態資源是指HTML的模板，如果項目不是由服務器完成渲染的SPA（單頁面）應用，那我們就要考慮如何實現HTML模板的渲染了。前端項目部署是指靜態資源文件在測試服務器上的部署，以及HTML模板文件在Node.js中間層服務器上的部署。

      前端工程師在未來的定位必然會發生變化，但是前端工程化唯一不變的原則是始終以前端開發為中心，前端工程化沒有統一的行業標準，也沒有固定的形態，更沒有最合理的方案，只要前端工程師的定位還在不斷的變化，前端工程化的進程將會一直持續下去。

      想要了解更多內容，訪問千鋒成都web前端培訓官網：www.yncex.com，千鋒成都web前端培訓班還為每一位同學準備了一份免費的web前端培訓視頻，跟著免費視頻輕松入門web前端。

上一篇

成都優秀的Java架構師需要知道的五個重點

下一篇

成都python培訓機構哪家好？