前端工程化到底是啥?可不止Webpack哦~-技术圈

大厂技术高级前端 Node进阶

点击上方程序员成长指北，关注公众号

回复 1 ，加入高级Node交流群

前言

大家好，我是考拉🐨。

什么是前端工程化，是我去年困扰我很久的一个问题，打开搜索引擎一搜，能找到四个关键字，模块化、组件化、规范化、自动化，但一看这几个字，更加迷茫了，没说解决了什么问题。大部分搜出来的都是 webpack、babel、eslint、gulp 等编译相关的配置，对于 2023年来说上面的回答着实有点管中窥豹了

大家也可以想想和评论区交流下，你觉得什么是前端工程化，最好有具体的实践

契机

前年年中和去年一年的时间里面，公司一直在推行效能提升，然后出现了一些前端中台部门，开启大前端时代，当时有三个虚拟小组

微前端架构为主的公共组件部门
脚手架为主的工具链部门
BFF 为主的 node.js 框架部门

我有幸加入了其中一个虚拟小组，脚手架部门，这方面的可以查一下，类似 CRA[1]、vue-cli[2] ，其实我们就是弄了一套自己公司规范的脚手架，当时我是开发里面其中的 ts + react 编码统一体验的功能，细嚼慢咽 Typescript + React17 +Eslint + Git hook 工作流[3]

后来我就在想。这种传统脚手架，好像成就感不是很大，无非就是公司技术栈 + 开源库，然后混在一起，执行命令简化流程，后来我就在想能不能写一点有用的工具，能不能把工具嵌入到脚手架里面，显得自己很牛皮（too young），后来就有了四个产品

根据 BFF 代码自动生成前端文档的脚本，解决后端经常来问前端某个接口聚合了哪几个后端接口的问题
前端代码走查工具 eruda-pixel[4]，提高了前端开发的质量和减少设计师验收打回的次数
纯前端实现的配置化 A、B test方案[5]，解决了无后端资源支持的传统 A、B test 方案
beta 版自动化测试平台，保证主流程代码无破坏性的修改

思考

直到有一天，猛的发现，前端工程化其实就是利用工具链解决前端在开发过程中提升效率和质量的问题

质量
效率

记住这两点，后面会举大量的例子，来证明这两个结论，后面还会再补充一个（协作）

历史

前端历史这一块不多介绍了，以前是没有前端编译，模块打包之类的，都是写什么就上线什么，所以后面出了模块加载器保证代码顺序加载而不会出错，前端编译保证兼容性和 tree-shaking 等，这就是第一代的前端工程化

前端工程化

我的理解是，前端工程化就是围绕敏捷开发流程，保证项目在团队协作过程中，能快速达到交付的标准，降低事故，所以答案呼之欲出了。想尽办法，提高持续交付的能力。

敏捷开发在一般的公司，都会有下面这几步：评审、准备开发、开发阶段、发布交付、上线。那就可以在这几步里面去提高效率，保证代码质量

评审

UI 标准规范，组件库
物料库

准备开发

仓库的创建，devops 平台（例如域名地址生成，网关路径匹配）
项目初始化，也就是脚手架初始化项目
包管理 monorepo ，文件管理、目录管理等规范
js、css 等规范

开发阶段

git 分支管理，code review 等
IDE
编译相关，也就是基于 webpack、vite 等 eslint 等大家熟知的工具链相关
私有化 npm 仓库
本地 mock 服务
打包配置
单元测试

发布交付

git hook 提交等流水相关
打包构建，CDN 相关
jenkins、 docker、k8s 等镜像管理
自动化测试
A、B test

上线

前端监控
埋点

技术卷技术，具有普遍性

其实上面举得例子都是技术卷技术，它是一种可迁移到任何一家公司的技术方案

例如

git 分支管理，就是保证了能团队能并行开发，代码减少冲突，提交团队协作
mock 服务，提高跟后端开发的效率，建立了一种约定式开发的协作流程
前端监控，保证了 bug 出现之后，能快速修复
单元测试和 code review 是保证质量的
ui 规范和物料库，都是提高开发效率的

为什么会叫技术卷技术，正常情况下，难题会分成两种，一种是业务复杂度，一种叫偶然复杂度，技术卷技术，就是解决偶然复杂度的，就好像有句话叫做，兵未动粮草先行，还有一句话叫做非战斗减员，其实就是让无关业务的问题下沉，尽量保证在开发的过程中不会出现或者不需要考虑。

设想一下。如果没有这种普遍性的前端工程化

新入职的小黄满怀期待的装好 vscode, 一打开，代码格式有 2 个缩进，有的是 4 个缩进，然后执行 npm install，却出现好多的 error,当小黄花了半小时解决了包版本的问题，npm start 启动，居然打开是空页面，废了半天的时间，才发现是环境变量导致域名不匹配的和跨域的问题，当小黄好不容易写完代码，准备联调，却发现怎么也调不通，小黄怒气冲冲的去找后端，后端笑着说，不好意思。改了一个接口没跟你说。终于联调完了。准备部署了，设计师却说，这里要再改改颜色和圆角度数，小黄说，这是按照你说的开发的，设计却说我没说，你就再改改吧，几分钟的事情。好不容易发布上线，居然踩坑了，主流程挂了，小黄要背锅了。经历了这一波之后，再也没见过小黄了（垃圾公司）。

技术卷业务，升职加薪

这方面是根据某一行的业务来的，不具有普遍性，大家可以多交流，后面会单独开一篇文章讲技术卷业务这里说一下

技术卷技术，提高前端工程化的能力
技术卷业务，提高前端架构的能力

如何提高前端工程化能力

就是多看，多学习，多交流，见得多了，就自然会了，例如

一键生成 icon 组件
一键生成组件模板
一键压缩图片
一键部署 cdn、oss 等
完整流程的云 devops 平台
阿里云监控
远程组件加载
文档、单元测试的生成，例如 storybook[6]
modern.js[7]

总结

前端工程化就是围绕敏捷开发流程，保证项目在团队协作过程中，能快速达到交付的标准，降低事故，主要从这几步中去发力：评审、准备开发、开发阶段、发布交付、上线。

作者：乘风gg
链接：https://juejin.cn/post/7190273248615989285
来源：稀土掘金

结语

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加考拉好友回复「Node」即可。

“分享、点赞、在看” 支持一下