什麼叫前端工程化
在回答這個問題之前，我先回顧一下前端的歷史。大約78年前，前端工程師還不是一個受人重視的職位，日常工作也就是切個圖，使用JQuery寫個指令碼，從某種意義上講，只是後端的附屬物。最近幾年，尤其是在nodejs出現之後，前端越來越受到重視，甚至已經開始搶佔了後端的市場。這同時也帶來了一個問題，前端的規模越來越大，已經上升到了工程學的問題，如何提高前端工程師的開發效率變得非常重要。這就是前端工程化所要解決的問題。前端工程化是根據業務特點，將前端開發流程規範化，標準化，它包括了開發流程，技術選型，程式碼規範，構建釋出等，用於提升前端工程師的開發效率和程式碼質量。
如何實現前端工程化
回答這個問題應該從一個前端工程的生命週期說起，在這個生命週期中任何的優化都應屬於前端工程化的範疇。
任何一個軟體工程大致上分為以上三步: 開發 -> 測試 -> 部署上線。具體到前端工程中，每一步又涵蓋了很多細節。
開發階段 - 前端三劍客為HTML, CSS和Javascript，執行環境為瀏覽器。但是大家在開發的過程中感覺原生的HTML, CSS和Javascript效率並不高，於是出現了模板，SCSS，Coffeescript/Typescript等中間型語言用於轉義為原生的語言(ES6也屬於這類情況)，所以應提供相關的構建工具用於轉義。再者，在開發過程中，開發者希望在編碼時，能夠立馬在瀏覽器中反應出變化，這又要求了自動重新整理。同時在開發中，還面臨過著JS依賴管理，效能優化等方面的問題。
測試階段 - 前端本質上屬於GUI的一種，所以不可避免的要有E2E(End to End Test)和保證功能的單元測試，測試的過程理應自動化，開發者只需要寫出相應的測試用例，剩下的交給工程化框架去自動執行並反饋給開發者結果。
部署階段 - 我相信沒有任何一個前端工程師會傻逼到將開發後的程式碼直接推到線上，當你使用Chrome開發者工具去看別人的網站時，一般都是壓縮過的程式碼。部署時候程式碼的組織形式肯定與開發時有很大的差異，例如從優化的角度上來說，要對程式碼進行壓縮，靜態資源部署到靜態伺服器上，對檔案加上md5防止瀏覽器使用舊快取等。關於部署的問題，大家可以參考張雲龍的經典博文: 大公司是怎麼開發和部署程式碼。
我的一些前端工程化實踐
我在上一家公司工作時，前端的架構比較簡單，典型的angular工程加上gulp去進行構建。當你手裡有一把錘子時，你看什麼都是釘子。這造成了很長一段時間內對前端工程化的理解就是使用gulp等構建工具。為什麼gulp不能完全算是前端工程化解決方案呢？首先先看看gulp幫我們解決了哪些東西和沒有解決哪些東西。通常情況下對gulp的使用會藉助gulp的各種外掛，以一種工作流的形式對程式碼進行檢查，執行壓縮，移動到相關目錄下，釋出到git倉庫等。從某種意義上來說，gulp確實幫助提高了開發的效率，但是它所做的東西很有限，它只是幫我們進行了構建，而且構建方案需要我們自己去寫，自由度相對較大，也沒有解決開發目錄約束，程式碼規範等一系列問題。
業界的一些前端工程化方案
一個符合前端工程化要求的方案應該包含以下要素:
- 開發規範
- 模組化開發
- 元件化開發
- 元件倉庫
- 效能優化
- 部署
- 開發流程
- 開發工具
業界中比較優秀的方案有:
- 百度fis
- UC scrat
- 騰訊mtjs
由於對第一種和第三種方案不太熟悉，我主要談談scrat是怎麼解決前端工程化中的各種問題。
scrat包括兩部分: 構建方案和前端模組化框架scrat.js。構建方案首先從開發目錄結構對工程進行了約束，目錄結構大致如下:
├─ component_modules (生態模組)
├─ components (工程模組)
├─ views (非模組化資源)
├─ ...
它將靜態資源分為兩種:
模組化資源: 具有獨立性的模組所對應的靜態資源。每個獨立的模組將自己所需要的js、css、模板、圖片等資源放在一起維護，使得模組具備獨立性，引用模組的js即可。
非模組化資源: 雖然在模組化開發體系內，應該一切皆模組，但總有不應該成為模組的資源，比如入口頁面、模組化框架、頁面啟動器等。
它定義自己的模組化系統，認為模組是可組合，可分解和更換的單元。工程師可以像搭積木一樣開發和維護系統，通過組裝得到一個完整的系統。scrat.js作為模組化開發框架，實現了js/css依賴管理，請求合併，按需載入，本地快取等功能，達到效果優化。具體使用方案請參考其官網。
前端工程化還有哪些需要考慮的
我能想到的還有以下這些:
git工作流 - 如何提交程式碼？
Node中間層 - 用於渲染一部分模板和路由等。
CI/CD - 主要利用git hooks通知CI，執行對應的指令碼(如gitlab)。
監控 - 前端監控主要分為效能監控和業務監控，它應支援自由配置各種報表和一系列報警規則。