什麼是前端工程化

什麼是前端工程化

前端工程化是使用軟件工程的技術和方法來進行前端的開發流程、技術、工具、經驗等規範化、標準化，其主要目的爲了提升效率和下降成本，即提升開發過程當中的開發效率，減小沒必要要的重複工做時間，而前端工程本質上是軟件工程的一種，所以咱們應該從軟件工程的角度來研究前端工程。

前端工程化就是爲了讓前端開發可以「自成體系」，我傾向於認爲主要應該從模塊化、組件化、規範化、自動化四個方面思考。

模塊化

模塊化就是將一個大文件拆分紅相互依賴的小文件，再進行統一的拼裝和加載。

AMD : require.js
CMD : sea.js( 棄用了 )
COMMON.js ： node.js

組件化

從UI拆分下來的每一個包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結構單元，咱們稱之爲組件。

組件化≠模塊化。模塊化只是在文件層面上，對代碼或資源的拆分；而組件化是在設計層面上，對UI（用戶界面）的拆分。

組件化其實是一種按照模板(HTML)+樣式(CSS)+邏輯(JS)三位一體的形式對面向對象的進一步抽象。

因此咱們除了封裝組件自己，還要合理處理組件之間的關係，好比 （邏輯）繼承、（樣式）擴展、（模板）嵌套和包含等，這些關係均可以歸爲依賴。

規範化

規範化實際上是工程化中很重要的一個部分，項目初期規範制定的好壞會直接影響到後期的開發質量。

（1）目錄結構的制定
目錄結構的合理設定，能爲項目帶來不少優勢：

• 有助於提升項目的邏輯結構合理性；
• 對應擴展和合做；
• 方便資源的統必定位管理。

（2）編碼規範
制定一套良好的編碼規範能夠加強團隊開發協做、提升代碼質量。
推薦參考凹凸實驗室打造的前端代碼規範。

（3）文檔規範

（4）組件管理

（5）git分支管理

（6）commit描述規範

（7）視覺圖標規範

自動化

前端工程化的不少髒活累活都應該交給自動化工具來完成。須要秉持的一個理念是:

任何簡單機械的重複勞動都應該讓機器去完成。

• 圖標合併

• 持續集成

• 自動化構建
  -gulp，grunt

• 自動化部署

• 自動化測試 集成單元測試，提升代碼可靠性。前端較爲流行的單元測試 mocha，qunit 等