「前端工程化」该怎么理解？
大家好，我是若川。今天分享一篇「前端工程化」的好文。非廣告，請(qǐng)放心閱讀。可點(diǎn)擊下方卡片關(guān)注我，或者查看系列文章。今天發(fā)文比較晚，以往都是定時(shí)早上7:30發(fā)文，也不知道是不是有點(diǎn)早。
一.什么是前端工程？
一個(gè)類似的術(shù)語(yǔ)是軟件工程（Software Engineering）：
Software engineering is the systematic application of engineering approaches to the development of software.
將工程方法系統(tǒng)化地應(yīng)用到軟件開(kāi)發(fā)中，就叫軟件工程。那么，緊接著又有兩個(gè)問(wèn)題：
工程方法是什么？
系統(tǒng)化怎么理解？
工程是指使用科學(xué)原理設(shè)計(jì)和制造機(jī)器、結(jié)構(gòu)等，比如修橋、鋪路、建隧道、造車、蓋房子：
Engineering is the use of scientific principles to design and build machines, structures, and other items, including bridges, tunnels, roads, vehicles, and buildings.
具體到軟件領(lǐng)域，指的是以系統(tǒng)、嚴(yán)謹(jǐn)、可量化的方法開(kāi)發(fā)、運(yùn)營(yíng)、維護(hù)軟件，軟件工程包括對(duì)這些方法的應(yīng)用和研究：
Software engineering the application of a systematic, disciplined, quantifiable approach to the development, operation and maintenance of software and the study of these approaches.
所謂系統(tǒng)化，可以理解為軟件生命周期中用到的這些工程方法是互補(bǔ)的，各自解決一部分問(wèn)題，聯(lián)合起來(lái)保障軟件的質(zhì)量、交付速度等
綜上所述，前端工程可以定義為，將工程方法系統(tǒng)化地應(yīng)用到前端開(kāi)發(fā)中，以系統(tǒng)、嚴(yán)謹(jǐn)、可量化的方法開(kāi)發(fā)、運(yùn)營(yíng)、維護(hù)前端應(yīng)用程序
二.前端工程的演進(jìn)歷程
同樣先看軟件工程，其發(fā)展歷程經(jīng)歷了這些關(guān)鍵點(diǎn)：
將計(jì)算機(jī)硬件抽象成馮·諾依曼架構(gòu)，進(jìn)而有了軟、硬件之分
隨著軟件復(fù)雜度的上升，模塊化和信息隱藏的理念被提出來(lái)
為了理解和管理軟件開(kāi)發(fā)過(guò)程，軟件工程變成了一個(gè)專業(yè)領(lǐng)域
為了評(píng)估軟件開(kāi)發(fā)團(tuán)隊(duì)的能力，成熟度衡量標(biāo)準(zhǔn)（CMMI-DEV）形成
基于現(xiàn)代軟件工程最佳實(shí)踐，建立起了人們普遍接受的軟件工程知識(shí)體系
前端工程也經(jīng)歷了類似的過(guò)程：
B/S 架構(gòu)興起，進(jìn)而有了前端、后端之分
隨著前端復(fù)雜度的上升，模塊復(fù)用、實(shí)踐規(guī)范越來(lái)越重要
為了管理和簡(jiǎn)化前端開(kāi)發(fā)過(guò)程，前端框架、自動(dòng)化、構(gòu)建系統(tǒng)應(yīng)運(yùn)而生并發(fā)展迅猛
基于行業(yè)最佳實(shí)踐，開(kāi)箱即用的框架（如dva）、工具體系等逐漸建立起來(lái)
前端越來(lái)越重，復(fù)雜度越來(lái)越高，配套的前端工程體系也在不斷發(fā)展和完善，可簡(jiǎn)單分為開(kāi)發(fā)、構(gòu)建、發(fā)布 3 條主線：
前端框架：插件化（jQuery） -> 模塊化（RequireJS） -> 組件化（React）
構(gòu)建工具：任務(wù)化（grunt/gulp） -> 系統(tǒng)化（webpack）
CI/CD：工具化（Jenkins） -> 自動(dòng)化（Web Hook）
三大主線撐起了前端工程體系，系統(tǒng)地覆蓋了前端開(kāi)發(fā)的主流程，其中的工程方法也彼此互補(bǔ)、相互影響，體現(xiàn)在：
構(gòu)建工具讓百花齊放前端框架、類庫(kù)能夠無(wú)縫合作
前端框架、類庫(kù)也在一定程度上影響著構(gòu)建工具（如模塊加載、CSS 預(yù)處理）、甚至 CI/CD（如 SSR）
三.面向過(guò)程視角下的前端工程體系
（摘自Book of Modern Front-end Tooling）
典型的前端工作流分為 5 個(gè)步驟：
開(kāi)發(fā)
測(cè)試
構(gòu)建
部署
監(jiān)控
從腳手架到監(jiān)控系統(tǒng)，配套的前端工程體系已經(jīng)融入到了前端工作流的每個(gè)環(huán)節(jié)，很大程度上決定著前端生產(chǎn)效率
P.S.開(kāi)發(fā)環(huán)節(jié)之前的分析、設(shè)計(jì)階段這里不展開(kāi)，因?yàn)閭鹘y(tǒng)的軟件工程方法同樣適用，前端項(xiàng)目在這個(gè)階段并沒(méi)有太大的特殊性
開(kāi)發(fā)階段
開(kāi)發(fā)階段的首要任務(wù)是創(chuàng)建樣板項(xiàng)目（一并選擇前端框架、類庫(kù)），接著開(kāi)始修改-驗(yàn)證的主循環(huán)，主要涉及這些工程化設(shè)施：
腳手架：創(chuàng)建前端應(yīng)用的目錄結(jié)構(gòu)，并生成樣板代碼
公共庫(kù)：維護(hù)著可復(fù)用的 UI 組件、工具模塊等公共資源
包管理器：引入第三方庫(kù)/組件，并跟蹤管理這些依賴項(xiàng)
編輯器：提供語(yǔ)法高亮、智能提示、引用跳轉(zhuǎn)等功能，提升開(kāi)發(fā)體驗(yàn)
構(gòu)建工具：提供語(yǔ)法校驗(yàn)、編譯、打包、DevServer 等功能，簡(jiǎn)化工作流
調(diào)試套件：提供預(yù)覽、DevTools、Mock、性能分析診斷等調(diào)試功能，加速修改-驗(yàn)證的主循環(huán)
測(cè)試階段
開(kāi)發(fā)完成，進(jìn)入測(cè)試階段，先要對(duì)整體功能進(jìn)行充分自測(cè)，再移交專業(yè)的測(cè)試人員驗(yàn)證，過(guò)程中需要用到工程化設(shè)施有：
單元測(cè)試框架：提供針對(duì)組件、邏輯的測(cè)試支持
靜態(tài)掃描工具：從代碼質(zhì)量、構(gòu)建產(chǎn)物質(zhì)量、最佳實(shí)踐/開(kāi)發(fā)規(guī)約等多個(gè)維度做靜態(tài)檢查
自動(dòng)化測(cè)試工具：針對(duì) UI 效果和業(yè)務(wù)流程，提供測(cè)試支持
性能測(cè)試工具：監(jiān)測(cè)并統(tǒng)計(jì)出相對(duì)準(zhǔn)確的性能數(shù)據(jù)
構(gòu)建階段
不同于開(kāi)發(fā)階段，在構(gòu)建階段要做更多的極限優(yōu)化和流程聯(lián)動(dòng)，涉及：
打包腳本：在語(yǔ)法校驗(yàn)、編譯、打包的基礎(chǔ)上，進(jìn)行合并、壓縮、代碼拆分、圖片處理、SSR等極限優(yōu)化
構(gòu)建服務(wù)：支持多任務(wù)并行打包、通知
部署階段
最后將經(jīng)過(guò)充分測(cè)試的前端應(yīng)用程序部署到生產(chǎn)環(huán)境，需要這些工程化工具：
發(fā)布平臺(tái)：將前端資源上傳至 CDN 或 SSR 渲染服務(wù)，或者以離線包的形式集成到移動(dòng)客戶端
迭代管理平臺(tái)：提供 CI/CD 支持
監(jiān)控階段
前端應(yīng)用程序上線之后，還需要持續(xù)關(guān)注線上的實(shí)際效果和異常情況，依賴這些工程設(shè)施：
埋點(diǎn)平臺(tái)：統(tǒng)計(jì)、分析業(yè)務(wù)數(shù)據(jù)，跟蹤性能指標(biāo)
監(jiān)控平臺(tái)：觀察線上的異常信息，包括報(bào)錯(cuò)、白屏、流量異常等
四.過(guò)程之間的銜接
除工作流各階段的工程設(shè)施之外，前端工程的另一部分是過(guò)程之間的銜接。前者旨在提高生產(chǎn)效率，后者要解決的是體驗(yàn)問(wèn)題
總的來(lái)看，前端工程的演進(jìn)體現(xiàn)在 2 方面：
協(xié)作模式：多表現(xiàn)為新的理念、新的架構(gòu)，如BFF/SFF
開(kāi)發(fā)模式：體現(xiàn)在新的抽象層、新的工作流上，如Sass、React、webpack、甚至Cloud IDE
無(wú)論是職責(zé)分工的變化還是具體工作內(nèi)容的變化，對(duì)開(kāi)發(fā)者而言，都意味著更多的學(xué)習(xí)、理解成本，并最終表現(xiàn)在開(kāi)發(fā)體驗(yàn)上。而面向過(guò)程間銜接的工程設(shè)施正是為了緩解這些變化帶來(lái)的升級(jí)適配成本，更平滑地走出過(guò)渡期
例如：
codemod：銜接新舊前端框架，降低升級(jí)適配成本
dva：銜接 React 生態(tài)中的各種優(yōu)秀理念（redux、redux-saga 等），降低學(xué)習(xí)成本
IDE：一方面打包全套工程設(shè)施，降低上手成本，另一方面銜接工作流的各個(gè)階段，提升開(kāi)發(fā)體驗(yàn)
理想的，前端工程不僅要持續(xù)優(yōu)化協(xié)作模式、提升開(kāi)發(fā)效率，還應(yīng)該保障開(kāi)箱即用的上手體驗(yàn)、一氣呵成的銜接體驗(yàn)、無(wú)縫切換的升級(jí)體驗(yàn)
五.總結(jié)
從面向過(guò)程的角度來(lái)看，前端工程是貫穿前端應(yīng)用生命周期的一系列工程設(shè)施，用來(lái)保障前端應(yīng)用的開(kāi)發(fā)體驗(yàn)、質(zhì)量和交付速度
具體的，前端工程圍繞開(kāi)發(fā)、構(gòu)建、發(fā)布 3 條主線展開(kāi)，以工具化、自動(dòng)化等手段解決各個(gè)環(huán)節(jié)所遇到的問(wèn)題。一方面控制前端開(kāi)發(fā)的復(fù)雜度，提高前端生產(chǎn)效率，另一方面降低架構(gòu)升級(jí)、協(xié)作模式變化等帶來(lái)的遷移、適配成本，提升開(kāi)發(fā)體驗(yàn)
參考資料
大公司里怎樣開(kāi)發(fā)和部署前端代碼？
如何推動(dòng)前端團(tuán)隊(duì)的基礎(chǔ)設(shè)施建設(shè)
最近組建了一個(gè)江西人的前端交流群，如果你也是江西人可以加我微信 ruochuan12 拉你進(jìn)群。
常駐推薦閱讀
我在阿里招前端，我該怎么幫你？（現(xiàn)在還可以加模擬面試群）
如何拿下阿里巴巴 P6 的前端 Offer
如何準(zhǔn)備阿里P6/P7前端面試--項(xiàng)目經(jīng)歷準(zhǔn)備篇
大廠面試官常問(wèn)的亮點(diǎn)，該如何做出？
如何從初級(jí)到專家(P4-P7)打破成長(zhǎng)瓶頸和有效突破
若川知乎問(wèn)答：2年前端經(jīng)驗(yàn)，做的項(xiàng)目沒(méi)什么技術(shù)含量，怎么辦？
如何準(zhǔn)備20K+的大廠前端面試
常駐末尾
你好，我是若川，江西人~(點(diǎn)擊藍(lán)字了解我)歷時(shí)一年只寫了一個(gè)學(xué)習(xí)源碼整體架構(gòu)系列?有哪些必看的JS庫(kù)：jQuery、underscore、lodash、sentry、vuex、axios、koa、redux
關(guān)注若川視野，回復(fù)"pdf" 領(lǐng)取優(yōu)質(zhì)前端書籍pdf，回復(fù)"1"，可加群長(zhǎng)期交流學(xué)習(xí)
我的博客地址：https://lxchuan12.gitee.io?歡迎收藏
覺(jué)得文章不錯(cuò)，可以?分享、點(diǎn)贊、在看?呀^_^另外歡迎留言交流～
小提醒：若川視野公眾號(hào)面試、源碼等文章合集在菜單欄中間【源碼精選】按鈕，歡迎點(diǎn)擊閱讀，也可以星標(biāo)我的公眾號(hào)，便于查找
總結(jié)
以上是生活随笔為你收集整理的「前端工程化」该怎么理解？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： [OpenAirInterface实战-
- 下一篇： 前端学习（3243）：react的生命周