【前端工程化之學習總結】

前言：

最近在學習前端，之前學習過JavaScript、css、jQuery等等前端知識，由于公司采取前後端分離技術，面對公司的紅利，作為後端開發的我開始系統的學習前端知識，之前在聽技術分享中，聽到了前端工程化，但是當時給我的觸動并沒有那麼大，現在自己深切閱讀中，确是别具一番風景中。

核心：

背景：

為滿足需求以及提升端開發效率和運作性能，前端工程化應運而生。

what：

工程化：

所謂工程化，就讓人們想到一個浩大的工程，前端工程化，我們可以簡單認為是将架構的職責拓寬再拓寬，主旨是幫業務團隊更好的完成需求，用工程化的思想去開發前端。

前端：

前端是一種GUI軟體。

從本質上講，所有Web應用都是一種運作在網頁浏覽器中的軟體，這些軟體的圖形使用者界面（Graphical User Interface，簡稱GUI）即為前端。

前端工程化需要考慮以下問題：

重複工作：如通用的流程控制機制，可擴充的UI元件、靈活的工具方法

重複優化：如降低架構層面更新帶給業務團隊的耗損、幫助業務在無感覺情況下做掉大部分優化（比如打包壓縮什麼的）

開發效率：如幫助業務團隊寫可維護的代碼、讓業務團隊友善的調試代碼（比如Hybrid調試）

前端工程化：總結為一句話為用工程化的思想帶領前端的開發，目的為更好的管理前端，提高開發效率。

發展：

第一階段：庫/架構選型

技術選型，是前端工程化建設的第一項任務。

第二階段：簡單建構優化

工具選型，是前端工程第二階段的任務，通過選擇建構工具，對代碼進行壓縮，校驗，資源合并。

第三階段：JS/CSS子產品化開發

子產品化開發，是分而治之的思想，是目前前端最流行的分治手段。

第四階段：元件化開發與資源管理

前端相比其他軟體開發，在基礎架構上更加迫切的需要元件化開發和資源管理

作用：

• 生産力提高

合理的開發流程及開發規範，包括代碼規範、子產品化、元件化規範等，運用分治的思想提高生産效率

• 系統可靠性提高

在前端工程化過程中會有相應的自動化代碼品質檢測方案，保證代碼規範

• 系統的伸縮性和靈活性

在前端工程化中會有相應的自動化及高度适應性的項目 釋出／部署 方案

• 使用者體驗度

總結：