|
前端工程化就是通過各種工具和技術(shù)，提升前端開發(fā)效率的過程。這句話有兩個含義：1：前端工程化的內(nèi)容：各種工具和技術(shù)；2：前端工程化的作用：通過使用工具，提升開發(fā)效率。
工程化解決的問題是，如何提高編碼、測試、維護階段的生產(chǎn)效率。
我們先來考慮一個問題，前端開發(fā)中會不會涉及業(yè)務？前端工程師是否需要考慮服務端的業(yè)務邏輯？要不要將一部分的業(yè)務放到前端來實現(xiàn)？
隨著需求的增加，不僅要做Web應用，還要做App、小程序以及各種端。當下需求的不斷攀升例如，解決代碼冗余，項目可維護性，提升版本迭代速度等等一系列的問題。一種新的前端優(yōu)化概念應用而生。
實現(xiàn)前端工程化的基礎——前后端分離
傳統(tǒng)模式下的協(xié)作開發(fā)效率非常低，例如整個項目中僅僅是1像素的偏差，就有可能要調(diào)動整個開發(fā)團隊來處理這1像素的問題，極大的浪費了團隊資源。
上訴的例子，僅是冰山一角，面對這么多的問題，前后端分離開發(fā)也就提上日程。前后端分離開發(fā)，為前端工程化的發(fā)展提供了生存的土壤。隨著市場需求的不斷變化，前端開發(fā)從傳統(tǒng)的WebPage模式，轉(zhuǎn)變到WebApp模式，Web產(chǎn)品形態(tài)的變化也不斷推動著前端工程師的工作內(nèi)容發(fā)生變化。在應對各種“變化”，前端工程師們也要設計出自己的前端開發(fā)“方法論”。
前端工程化的主要目標就是解放生產(chǎn)力、提高生產(chǎn)效率。通過制定一系列的規(guī)范，借助工具和框架解決前端開發(fā)以及前后端協(xié)作過程中的痛點和難度問題。
如何實施前端工程化？
明確前后端開發(fā)的分工，是實現(xiàn)前后端分離的第一步。也是后面實現(xiàn)前端各種優(yōu)化方案的基礎。
前端工程師主要負責的內(nèi)容包括：
靜態(tài)資源和動態(tài)資源的處理；
JavaScript實現(xiàn)前端業(yè)務邏輯；
HTML模板文件的產(chǎn)出；
中間層Web服務，一般由Node.js實現(xiàn)；
前端單元測試；
前端項目部署；
從項目開發(fā)的整體環(huán)節(jié)來說，實現(xiàn)前端工程化還需要熟練以下幾個方面其中之一
使用Webpack實現(xiàn)項目構(gòu)建
構(gòu)建，簡單來說就是編譯，前端開發(fā)的所有文件最終歸屬是要交給瀏覽器去解析、渲染，并將頁面呈現(xiàn)給用戶，構(gòu)建就是將前端開發(fā)中的所有源代碼轉(zhuǎn)化為宿主瀏覽器可以執(zhí)行的代碼。前端構(gòu)建產(chǎn)出的資源文件只有三種，HTML、CSS、JS文件。需要完成編譯的內(nèi)容有：
無法被瀏覽器直接識別的JS代碼，包括ES6/7/8/9/10等符合ECMAScript規(guī)范的JS代碼；
無法被瀏覽器直接識別的CSS代碼，包括SASS/LESS等預編譯的CSS語法；
無法被瀏覽器識別的HTML模板代碼，包括jade、ejs、artTemplate、mustache等Node.js模板引擎；
項目構(gòu)建其實就是為了彌補瀏覽器自身的缺陷和不足，是一種面向語言的編譯過程。那么，除了針對語言本身之外，前端的構(gòu)建還應該考慮到Web應用的性能優(yōu)化。這些優(yōu)化主要是為了減少HTTP請求，提升用戶體驗。
 |
