淺說前端工程化

前言

以前看到一個問關於什麼是前端工程化的帖子，這個問題以前面試的時候也被問過，如今就係統的整理一下，分享給你們。

什麼是前端工程化

大致的來講，前端工程化有兩層含義：

1. 廣義的前端工程化

前端工程是軟件工程的一個子類，指的是將軟件工程的方法和原理運用在前端開發中, 目的是實現 高效開發，有效協同，質量可控。

2.狹義的前端工程化

前端工程是指將 開發階段 的代碼轉變成 生產環境 的代碼的 一系列步驟。
主要包括 構建 , 分支管理 , 自動化測試, 部署 等。

簡單總結一下就是：

廣義的前端工程是一個系統工程，須要從軟件生命週期的各個方面入手，本質上屬於管理科學的方法論。

狹義的前端工程是前端開發流程中的一部分，本質上屬於軟件技術的範疇和開發的最佳實踐。咱們平時提到的前端，若是特別說明，通常指的就是狹義上的前端工程。

爲何要提早端工程化

看了以前枯燥的概念，有的小夥伴可能要說了，'前端不就是將後端的數據以網頁的形式呈現給用戶麼，只是一層視圖，爲何須要工程化管理呢？'

寫到這，不由想到去年的一個帖子《在 2016 年學 JavaScript 是一種什麼樣的體驗？》

簡單來講，前端愈來愈複雜，設計的問題和環節也愈來愈多，不採用工程化管理，就沒法很好的實現團隊協同和下降複雜性。 具體的緣由大概有如下幾點：

1. 前端範疇不斷擴大。

早期的前端只須要適配桌面瀏覽器，而如今的前端，須要適配不一樣類型和尺寸的設備，包括移動端網頁，app應用等。
    
    
 2. 先後端分離

早期的前端只是後端 MVC 框架的一層模塊， 而如今的前端廣泛是從後端接口獲取數據，編寫處理邏輯，各類前端mvc前端框架也層出不窮。
    
 

 3. 模塊化開發的出現
    
如今的前端開發再也不是從零寫起，重複造輪子，而是會引用大量內部和外部的組件和模塊，這也致使前端必須進行模塊管理。
      
  

 4. 轉碼器的盛行
   
爲了提升效率，前端工程每每不會直接寫html,css,和js代碼，而是改用其餘格式書寫，再用工具編譯爲目標格式。
好比用Jade 寫HTML，用less／sass／stylus 編寫CSS,用ES6/Typescript/.. 編寫JavaScript.
        
 5. 開發流程和團隊
早期的前端團隊每每只有幾我的，而如今的前端團隊能夠擴展到幾十人，甚至上百人。每一個人只負責本身的一塊內容。
因此，如何協調多人多團隊的工做，保證溝通順暢，保證權限管理，愈來愈成爲一大問題。

前端工程化的具體內容

基於以上幾點，總結一下前端工程化的具體內容：

1.代碼規範: 保證團隊全部成員以一樣的規範開發代碼。
2.分支管理: 不一樣的開發人員開發不一樣的功能或組件，按照統一的流程合併到主幹。
3.模塊管理: 一方面，團隊引用的模塊應該是規範的;另外一方面，必須保證這些模塊能夠正確的加入到最終編譯好的包文件中。
4.自動化測試：爲了保證和並進主幹的代碼達到質量標準，必須有測試，並且測試應該是自動化的，能夠迴歸的。
5.構建：主幹更新之後，自動將代碼編譯爲最終的目標格式，而且準備好各類靜態資源，
6.部署。 將構建好的代碼部署到生產環境。

以上。:)

推薦閱讀：

http://www.cnblogs.com/ihardc...