前端工程化的理解

前端工程化是一個新興的詞語，改變了前端的開發模式，《前端工程化體系設計與實踐》系統的闡述了前端工程化的方方面面。

1、前端工程簡史

1. 前端工程師的技能棧

（1）硬技能：HTML、CSS、JavaScript，三者相互耦合，並不是獨立。

（2）軟技能：用戶體驗，保證內容的快速呈現、減小等待時間等。快速展示、快速迭代。

（3）擴展技能：以Node.js爲表明的Web服務器端知識。有助於編寫更合理的客戶端邏輯，以及對產品出現的問題及時定位。

2. 先後端分離的基本模式

（1）CSS以及相關的圖片等媒體資源

（2）JavaScript邏輯

（3）HTML文檔，HTML源文件、HTML模版等

後端工程師的惟一產出就是數據。

3. 前端工程化

最終目的之一即是實現更合理、更便利的先後端分離開發環境。二者相互依賴、緊密耦合在一塊兒。

主要目標是解放生產力、提升生產效率。經過指定一系列的規範，藉助工具和框架解決前端開發以及先後端協做開發過程當中的痛點和難點問題。

具體衡量標準：快、準、穩。

4. 前端工程的3個階段

（1）本地工具鏈，以工具爲實現媒介，規範爲藍本。使用統一的工具鏈、遵循統一的規範進行業務代碼的編寫，利於多人協做與程序的維護。

（2）管理平臺，進一步淡化差別、加深規範。

（3）持續集成，融入總體。與總體工做流結合，做爲持續集成方案中的一環。

5. 設計原則

規範設計原則——用戶至上。編碼規範的設計原則着重於代碼的可移植性，減小對代碼的捆綁性。

架構設計原則——擴展至上。前端資源以及技術選型的多樣性，令擴展性對於前端工程化方案來講尤其重要。應當秉持「內核輕量，擴展豐富」的原則。

2、腳手架、構建

1. 腳手架

腳手架做爲一種建立項目初始文件的工具被普遍地應用於新項目或迭代初始階段。避免人爲失誤引發的低級錯誤，同時結合總體前端工程化方案，快速生成功能模塊配置、自動安裝依賴，下降了時間成本。

腳手架的功能用一句話歸納就是：建立項目初始文件。

一款優秀的腳手架必須兼具功能性、開放性以及動態性。

工具棧的集成統一下降了部署、學習和使用成本，而且加深了規範意識。

Yeoman是目前市場上最好的腳手架框架，功能豐富、便於擴展而且兼容不一樣的操做系統和執行環境。

2. 構建

構建或者叫作編譯，承擔着從源代碼到可執行代碼的轉換者角色，其核心是資源的管理，產出資源包括JS、CSS、HTML等。

緩存的合理利用是衡量部署策略合理性的要素之一。

webpack功能豐富能夠知足絕大多數的需求，可是配置很是複雜，須要必定地學習成本。

前端的工做產出均直接面向用戶，前端工程師須要堅持以下兩項原則。

（1）於產品而言，須保證性能和體驗。

（2）於開發而言，須保證快速與嚴謹。