「前端工程化」該怎麼理解？
一.什麼是前端工程？
一個類似的術語是軟體工程（Software Engineering）：
Software engineering is the systematic application of engineering approaches to the development of software.
將工程方法系統化地應用到軟體開發中，就叫軟體工程。那麼，緊接著又有兩個問題：
-
工程方法是什麼？
-
系統化怎麼理解？
工程是指使用科學原理設計和製造機器、結構等，比如修橋、鋪路、建隧道、造車、蓋房子：
Engineering is the use of scientific principles to design and build machines, structures, and other items, including bridges, tunnels, roads, vehicles, and buildings.
具體到軟體領域，指的是以系統、嚴謹、可量化的方法開發、運營、維護軟體，軟體工程包括對這些方法的應用和研究：
Software engineering the application of a systematic, disciplined, quantifiable approach to the development, operation and maintenance of software and the study of these approaches.
所謂系統化，可以理解為軟體生命週期中用到的這些工程方法是互補的，各自解決一部分問題，聯合起來保障軟體的質量、交付速度等
綜上所述，前端工程可以定義為，將工程方法系統化地應用到前端開發中，以系統、嚴謹、可量化的方法開發、運營、維護前端應用程式
二.前端工程的演進歷程
同樣先看軟體工程，其發展歷程經歷了這些關鍵點：
-
將計算機硬體抽象成馮·諾依曼架構，進而有了軟、硬體之分
-
隨著軟體複雜度的上升，模組化和資訊隱藏的理念被提出來
-
為了理解和管理軟體開發過程，軟體工程變成了一個專業領域
-
為了評估軟體開發團隊的能力，成熟度衡量標準（CMMI-DEV）形成
-
基於現代軟體工程最佳實踐，建立起了人們普遍接受的軟體工程知識體系
前端工程也經歷了類似的過程：
-
B/S 架構興起，進而有了前端、後端之分
-
隨著前端複雜度的上升，模組複用、實踐規範越來越重要
-
為了管理和簡化前端開發過程，前端框架、自動化、構建系統應運而生並發展迅猛
-
基於行業最佳實踐，開箱即用的框架（如dva）、工具體系等逐漸建立起來
前端越來越重，複雜度越來越高，配套的前端工程體系也在不斷髮展和完善，可簡單分為開發、構建、釋出 3 條主線：
-
前端框架：外掛化（jQuery） -> 模組化（RequireJS） -> 元件化（React）
-
構建工具：任務化（grunt/gulp） -> 系統化（webpack）
-
CI/CD：工具化（Jenkins） -> 自動化（Web Hook）
三大主線撐起了前端工程體系，系統地覆蓋了前端開發的主流程，其中的工程方法也彼此互補、相互影響，體現在：
-
構建工具讓百花齊放前端框架、類庫能夠無縫合作
-
前端框架、類庫也在一定程度上影響著構建工具（如模組載入、CSS 預處理）、甚至 CI/CD（如 SSR）
三.面向過程視角下的前端工程體系
（摘自Book of Modern Front-end Tooling）
典型的前端工作流分為 5 個步驟：
-
開發
-
測試
-
構建
-
部署
-
監控
從腳手架到監控系統，配套的前端工程體系已經融入到了前端工作流的每個環節，很大程度上決定著前端生產效率
P.S.開發環節之前的分析、設計階段這裡不展開，因為傳統的軟體工程方法同樣適用，前端專案在這個階段並沒有太大的特殊性
開發階段
開發階段的首要任務是建立樣板專案（一併選擇前端框架、類庫），接著開始修改-驗證的主迴圈，主要涉及這些工程化設施：
-
腳手架：建立前端應用的目錄結構，並生成樣板程式碼
-
公共庫：維護著可複用的 UI 元件、工具模組等公共資源
-
包管理器：引入第三方庫/元件，並跟蹤管理這些依賴項
-
編輯器：提供語法高亮、智慧提示、引用跳轉等功能，提升開發體驗
-
構建工具：提供語法校驗、編譯、打包、DevServer 等功能，簡化工作流
-
除錯套件：提供預覽、DevTools、Mock、效能分析診斷等除錯功能，加速修改-驗證的主迴圈
測試階段
開發完成，進入測試階段，先要對整體功能進行充分自測，再移交專業的測試人員驗證，過程中需要用到工程化設施有：
-
單元測試框架：提供針對元件、邏輯的測試支援
-
靜態掃描工具：從程式碼質量、構建產物質量、最佳實踐/開發規約等多個維度做靜態檢查
-
自動化測試工具：針對 UI 效果和業務流程，提供測試支援
-
效能測試工具：監測並統計出相對準確的效能資料
構建階段
不同於開發階段，在構建階段要做更多的極限優化和流程聯動，涉及：
-
打包指令碼：在語法校驗、編譯、打包的基礎上，進行合併、壓縮、程式碼拆分、圖片處理、SSR等極限優化
-
構建服務：支援多工並行打包、通知
部署階段
最後將經過充分測試的前端應用程式部署到生產環境，需要這些工程化工具：
-
釋出平臺：將前端資源上傳至 CDN 或 SSR 渲染服務，或者以離線包的形式整合到移動客戶端
-
迭代管理平臺：提供 CI/CD 支援
監控階段
前端應用程式上線之後，還需要持續關注線上的實際效果和異常情況，依賴這些工程設施：
-
埋點平臺：統計、分析業務資料，跟蹤效能指標
-
監控平臺：觀察線上的異常資訊，包括報錯、白屏、流量異常等
四.過程之間的銜接
除工作流各階段的工程設施之外，前端工程的另一部分是過程之間的銜接。前者旨在提高生產效率，後者要解決的是體驗問題
總的來看，前端工程的演進體現在 2 方面：
-
協作模式：多表現為新的理念、新的架構，如BFF/SFF
-
開發模式：體現在新的抽象層、新的工作流上，如Sass、React、webpack、甚至Cloud IDE
無論是職責分工的變化還是具體工作內容的變化，對開發者而言，都意味著更多的學習、理解成本，並最終表現在開發體驗上。而面向過程間銜接的工程設施正是為了緩解這些變化帶來的升級適配成本，更平滑地走出過渡期
例如：
-
codemod：銜接新舊前端框架，降低升級適配成本
-
dva：銜接 React 生態中的各種優秀理念（redux、redux-saga 等），降低學習成本
-
IDE：一方面打包全套工程設施，降低上手成本，另一方面銜接工作流的各個階段，提升開發體驗
理想的，前端工程不僅要持續優化協作模式、提升開發效率，還應該保障開箱即用的上手體驗、一氣呵成的銜接體驗、無縫切換的升級體驗
五.總結
從面向過程的角度來看，前端工程是貫穿前端應用生命週期的一系列工程設施，用來保障前端應用的開發體驗、質量和交付速度
具體的，前端工程圍繞開發、構建、釋出 3 條主線展開，以工具化、自動化等手段解決各個環節所遇到的問題。一方面控制前端開發的複雜度，提高前端生產效率，另一方面降低架構升級、協作模式變化等帶來的遷移、適配成本，提升開發體驗
參考資料
-
大公司裡怎樣開發和部署前端程式碼？
-
如何推動前端團隊的基礎設施建設