所以。。。什么才是前端工程化？

大廠技術(shù)  高級(jí)前端  精選文章

點(diǎn)擊上方 全站前端精選，關(guān)注公眾號(hào)

回復(fù)1，加入高級(jí)前段交流

前言

什么是前端工程化，是我去年困擾我很久的一個(gè)問(wèn)題，打開搜索引擎一搜，能找到四個(gè)關(guān)鍵字，模塊化、組件化、規(guī)范化、自動(dòng)化，但一看這幾個(gè)字，更加迷茫了，沒(méi)說(shuō)解決了什么問(wèn)題。大部分搜出來(lái)的都是 webpack、babel、eslint、gulp 等編譯相關(guān)的配置，對(duì)于 2023年 來(lái)說(shuō)上面的回答著實(shí)有點(diǎn)管中窺豹了

大家也可以想想和評(píng)論區(qū)交流下，你覺(jué)得什么是前端工程化，最好有具體的實(shí)踐

契機(jī)

前年年中和去年一年的時(shí)間里面，公司一直在推行效能提升，然后出現(xiàn)了一些前端中臺(tái)部門，開啟大前端時(shí)代，當(dāng)時(shí)有三個(gè)虛擬小組

1. 微前端架構(gòu)為主的公共組件部門
2. 腳手架為主的工具鏈部門
3. BFF 為主的 node.js 框架部門

我有幸加入了其中一個(gè)虛擬小組，腳手架部門，這方面的可以查一下，類似 CRA[1]、vue-cli[2] ，其實(shí)我們就是弄了一套自己公司規(guī)范的腳手架，當(dāng)時(shí)我是開發(fā)里面其中的 ts + react 編碼統(tǒng)一體驗(yàn)的功能，細(xì)嚼慢咽 Typescript + React17 +Eslint + Git hook 工作流[3]

后來(lái)我就在想。這種傳統(tǒng)腳手架，好像成就感不是很大，無(wú)非就是公司技術(shù)棧 + 開源庫(kù)，然后混在一起，執(zhí)行命令簡(jiǎn)化流程， 后來(lái)我就在想能不能寫一點(diǎn)有用的工具，能不能把工具嵌入到腳手架里面，顯得自己很牛皮（too young），后來(lái)就有了四個(gè)產(chǎn)品

1. 根據(jù) BFF 代碼自動(dòng)生成前端文檔的腳本，解決后端經(jīng)常來(lái)問(wèn)前端某個(gè)接口聚合了哪幾個(gè)后端接口的問(wèn)題
2. 前端代碼走查工具 eruda-pixel[4]，提高了前端開發(fā)的質(zhì)量和減少設(shè)計(jì)師驗(yàn)收打回的次數(shù)
3. 純前端實(shí)現(xiàn)的配置化 A、B test方案[5]，解決了無(wú)后端資源支持的傳統(tǒng) A、B test 方案
4. beta 版自動(dòng)化測(cè)試平臺(tái)，保證主流程代碼無(wú)破壞性的修改

思考

直到有一天，猛的發(fā)現(xiàn)，前端工程化其實(shí)就是利用工具鏈解決前端在開發(fā)過(guò)程中提升效率和質(zhì)量的問(wèn)題

1. 質(zhì)量
2. 效率

記住這兩點(diǎn)，后面會(huì)舉大量的例子，來(lái)證明這兩個(gè)結(jié)論，后面還會(huì)再補(bǔ)充一個(gè)（協(xié)作）

歷史

前端歷史這一塊不多介紹了，以前是沒(méi)有前端編譯，模塊打包之類的，都是寫什么就上線什么，所以后面出了模塊加載器保證代碼順序加載而不會(huì)出錯(cuò)，前端編譯保證兼容性和 tree-shaking 等，這就是第一代的前端工程化

前端工程化

我的理解是，前端工程化就是圍繞敏捷開發(fā)流程，保證項(xiàng)目在團(tuán)隊(duì)協(xié)作過(guò)程中，能快速達(dá)到交付的標(biāo)準(zhǔn)，降低事故，所以答案呼之欲出了。想盡辦法，提高持續(xù)交付的能力。

敏捷開發(fā)在一般的公司，都會(huì)有下面這幾步：評(píng)審、準(zhǔn)備開發(fā)、開發(fā)階段、發(fā)布交付、上線。那就可以在這幾步里面去提高效率，保證代碼質(zhì)量

評(píng)審

1. UI 標(biāo)準(zhǔn)規(guī)范，組件庫(kù)
2. 物料庫(kù)

準(zhǔn)備開發(fā)

1. 倉(cāng)庫(kù)的創(chuàng)建，devops 平臺(tái)（例如域名地址生成，網(wǎng)關(guān)路徑匹配）
2. 項(xiàng)目初始化，也就是腳手架初始化項(xiàng)目
3. 包管理 monorepo ，文件管理、目錄管理等規(guī)范
4. js、css 等規(guī)范

開發(fā)階段

1. git 分支管理，code review 等
2. IDE
3. 編譯相關(guān)，也就是基于 webpack、vite 等 eslint 等大家熟知的工具鏈相關(guān)
4. 私有化 npm 倉(cāng)庫(kù)
5. 本地 mock 服務(wù)
6. 打包配置
7. 單元測(cè)試

發(fā)布交付

1. git hook 提交等流水相關(guān)
2. 打包構(gòu)建，CDN 相關(guān)
3. jenkins、 docker、k8s 等鏡像管理
4. 自動(dòng)化測(cè)試
5. A、B test

上線

1. 前端監(jiān)控
2. 埋點(diǎn)

技術(shù)卷技術(shù)，具有普遍性

其實(shí)上面舉得例子都是技術(shù)卷技術(shù)，它是一種可遷移到任何一家公司的技術(shù)方案

例如

1. git 分支管理，就是保證了能團(tuán)隊(duì)能并行開發(fā)，代碼減少?zèng)_突，提交團(tuán)隊(duì)協(xié)作
2. mock 服務(wù)，提高跟后端開發(fā)的效率，建立了一種約定式開發(fā)的協(xié)作流程
3. 前端監(jiān)控，保證了 bug 出現(xiàn)之后，能快速修復(fù)
4. 單元測(cè)試和 code review 是保證質(zhì)量的
5. ui 規(guī)范和物料庫(kù)，都是提高開發(fā)效率的

為什么會(huì)叫技術(shù)卷技術(shù)，正常情況下，難題會(huì)分成兩種，一種是業(yè)務(wù)復(fù)雜度，一種叫偶然復(fù)雜度，技術(shù)卷技術(shù)，就是解決偶然復(fù)雜度的，就好像有句話叫做，兵未動(dòng) 糧草先行，還有一句話叫做非戰(zhàn)斗減員，其實(shí)就是讓無(wú)關(guān)業(yè)務(wù)的問(wèn)題下沉，盡量保證在開發(fā)的過(guò)程中不會(huì)出現(xiàn)或者不需要考慮。

設(shè)想一下。如果沒(méi)有這種普遍性的前端工程化

新入職的小黃滿懷期待的裝好 vscode, 一打開，代碼格式有 2 個(gè)縮進(jìn)，有的是 4 個(gè)縮進(jìn)，然后執(zhí)行 npm install，卻出現(xiàn)好多的 error,當(dāng)小黃花了半小時(shí)解決了包版本的問(wèn)題，npm start 啟動(dòng)，居然打開是空頁(yè)面，廢了半天的時(shí)間，才發(fā)現(xiàn)是環(huán)境變量導(dǎo)致域名不匹配的和跨域的問(wèn)題，當(dāng)小黃好不容易寫完代碼，準(zhǔn)備聯(lián)調(diào)，卻發(fā)現(xiàn)怎么也調(diào)不通，小黃怒氣沖沖的去找后端，后端笑著說(shuō)，不好意思。改了一個(gè)接口沒(méi)跟你說(shuō)。終于聯(lián)調(diào)完了。準(zhǔn)備部署了，設(shè)計(jì)師卻說(shuō)，這里要再改改顏色和圓角度數(shù)，小黃說(shuō)，這是按照你說(shuō)的開發(fā)的，設(shè)計(jì)卻說(shuō)我沒(méi)說(shuō)，你就再改改吧，幾分鐘的事情。好不容易發(fā)布上線，居然踩坑了，主流程掛了，小黃要背鍋了。經(jīng)歷了這一波之后，再也沒(méi)見過(guò)小黃了（垃圾公司）。

技術(shù)卷業(yè)務(wù)，升職加薪

這方面是根據(jù)某一行的業(yè)務(wù)來(lái)的，不具有普遍性，大家可以多交流，后面會(huì)單獨(dú)開一篇文章講技術(shù)卷業(yè)務(wù) 這里說(shuō)一下

1. 技術(shù)卷技術(shù)，提高前端工程化的能力
2. 技術(shù)卷業(yè)務(wù)，提高前端架構(gòu)的能力

如何提高前端工程化能力

就是多看，多學(xué)習(xí)，多交流，見得多了，就自然會(huì)了，例如

1. 一鍵生成 icon 組件
2. 一鍵生成組件模板
3. 一鍵壓縮圖片
4. 一鍵部署 cdn、oss 等
5. 完整流程的云 devops 平臺(tái)
6. 阿里云監(jiān)控
7. 遠(yuǎn)程組件加載
8. 文檔、單元測(cè)試的生成，例如 storybook[6]
9. modern.js[7]

總結(jié)

前端工程化就是圍繞敏捷開發(fā)流程，保證項(xiàng)目在團(tuán)隊(duì)協(xié)作過(guò)程中，能快速達(dá)到交付的標(biāo)準(zhǔn)，降低事故，主要從這幾步中去發(fā)力：評(píng)審、準(zhǔn)備開發(fā)、開發(fā)階段、發(fā)布交付、上線。

作者：乘風(fēng)gg
鏈接：https://juejin.cn/post/7190273248615989285
來(lái)源：稀土掘金

    
    

     
     

      
      

       前端 社群
      
      
     
     
    
    
    
    

     
     

      
      

       
       

        
        

       
       
       
       

        
        

       
       
      
      
     
     
    
    

下方加 Nealyang 好友回復(fù)「 加群」即可。


如果你覺(jué)得這篇內(nèi)容對(duì)你有幫助，我想請(qǐng)你幫我2個(gè)小忙：

    
    

     1. 點(diǎn)個(gè)「在看」，讓更多人也能看到這篇文章