什么叫前端工程化,就是我上年困惑

什么叫前端工程化，就是我上年困惑我很多年的一个问题，开启百度搜索引擎一搜，能够找到四个关键词，模块化设计、组件化、规范性、自动化技术，但一看这三个字，更为迷茫了，不说克服了什么样的问题。绝大多数搜出来的基本都是 webpack、babel、eslint、gulp 等编译程序有关配置，针对 2023年 而言上边的答案确实有点儿窥豹一斑了

大家可以想一想和发表评论沟通交流下，大家觉得什么叫前端工程化，最好是有实际实践探索

突破口

去年年中合上年一年的时间里边，企业一直在实行效能提升，随后出现了一些前面云管端单位，打开大前端时期，那时候有三个虚似工作组

1. 微前端架构为主体的公共组件单位
2. 钢管脚手架为主体的工具链单位
3. BFF 为主体的 node.js 架构单位

我有幸加入其中一个虚似工作组，钢管脚手架单位，这一块的能够查一下，相近 CRA、vue-cli ，实际上我们都是整了一套自身公司规范的钢管脚手架，那时候我就是开发设计里边这其中的 ts react 编号统一感受的作用，慢嚼 Typescript React17 Eslint Git hook 工作流引擎

之后我就在想。这种传统钢管脚手架，仿佛满足感并不是很大，无非是企业技术栈 开源库，随后混在一起，运行命令优化流程， 之后我就在想能否写一点有价值的专用工具，可不可以把专用工具嵌入到钢管脚手架里边，显得自己很牛皮革（too young），之后也就有了四个商品

1. 依据 BFF 编码一键生成前面文档的脚本制作，处理后面常常去问前面某一插口汇聚了哪些后端接口问题
2. 前端代码走查专用工具 eruda-pixel，提升了前端工程师质量以及降低室内设计师工程验收打到次数
3. 纯前面达到的配置化 A、B test计划方案，处理无任何后面市场支持传统 A、B test 计划方案
4. beta 版功能测试服务平台，确保主流程编码无破坏性的改动

思索

直到有一天，猛得发觉，前端工程化本身就是运用工具链处理前面在开发过程中提高效率和效果问题

1. 品质
2. 高效率

记牢这两个方面，接下来会举很多的事例，来验证这俩结果，后边还会继续填补一个（合作）

历史时间

前面历史时间这一块很少阐述了，原来是并没有前面编译程序，控制模块装包什么的，全是写点什么就发布哪些，但后面出控制模块加载器确保编码次序载入而不会错，前面编译程序确保兼容模式和 tree-shaking 等，这便是第一代的前端工程化

前端工程化

我的观点是，前端工程化便是紧紧围绕迭代开发步骤，确保项目在团结协作环节中，能迅速做到交付规范，减少安全事故，因此答案呼之欲出了。想方设法，提升迭代开发能力。

迭代开发在一般的企业，都有以下这两步：审查、提前准备开发设计、设计阶段、公布交货、发布。那么就可以在这里两步里去提高工作效率，确保代码质量

审查

1. UI 技术标准，组件库
2. 原材料库

提前准备开发设计

1. 仓库建立，devops 服务平台（比如域名地址形成，网关ip途径配对）
2. 新项目复位，其实就是钢管脚手架复位新项目
3. 包管理 monorepo，文档管理、目录管理等标准
4. js、css 等标准

设计阶段

1. git 支系管理方法，code review 等
2. IDE
3. 编译程序有关，也就是基于 webpack、vite 等 eslint 等大家熟知的工具链有关
4. 民营化 npm 库房
5. 当地 mock 服务项目
6. 装包配备
7. 单元测试卷

公布交货

1. git hook 递交等银行流水有关
2. 装包搭建，CDN 有关
3. jenkins、 docker、k8s 等镜像系统管理方法
4. 功能测试
5. A、B test

发布

1. 前端监控
2. 埋点

技术性卷技术，具备客观性

实际上上边觉得事例全是技术性卷技术，它是一种可转移到任何一家企业的技术方案

比如

1. git 支系管理方法，便是确保后能精英团队能并行开发，编码降低矛盾，递交团结协作
2. mock 服务项目，提升跟后端工程师效率，设立了一种承诺式研发的合作步骤
3. 前端监控，确保了 bug 出现之后，能迅速修补
4. 单元测试卷和 code review 是提高质量的
5. ui 标准与原材料库，全是提升研发效率的

为什么会叫技术性卷技术，通常情况下，难点会分为这两种，一种是业务流程复杂性，一种叫不经意复杂性，技术性卷技术，便是处理不经意复杂性的，就像有一句话叫，兵没动 兵马未动，还有一句话叫做非战斗减员，本身就是让不相干业务难题下移，尽量保持在研发的过程当中不会有或是不需要考虑。

设想一下。要是没有这类客观性的前端工程化

刚入职的小黄充满期待的装上 vscode, 一打开，代码格式有 2 个缩近，有些是 4 个缩近，随后实行 npm install，却出现好多 error,当紫色花了三十分钟克服了包版本难题，npm start 运行，竟然开启是空网页页面，残了半天的时长，居然是系统变量造成网站域名不一致总和跨域请求问题，当小黄千辛万苦写完了编码，提前准备联动，结果发现怎么都调堵塞，小绿气冲冲的来找后面，后面笑着说道，过意不去。修改了一个插口没和你说。总算联动完后。提前准备启动了，室内设计师却这样说，这儿还要再修改色调和圆角度数，小黄说，这也是依照你所说的研发的，设计方案却这样说我没说，你也就再修改吧，数分钟的事。千辛万苦公布发布，竟然踩雷了，主流程挂掉，小黄要背黑锅了。经历过这一波以后，再也没见太小发黄（垃圾公司）。

技术性卷业务流程，涨薪

这些方面是依据某一行的业务流程的，不具备客观性，你们可以多沟通，接下来会独立开一篇文章讲技术性卷业务流程 这儿说一下

1. 技术性卷技术，提升前端工程化能力
2. 技术性卷业务流程，提升前端架构能力

怎样提高前端工程化水平

便是多看看，多学学，多沟通，见多了，自然而然就会了，比如

1. 一键生成 icon 部件
2. 一键生成部件模版
3. 一键压缩照片
4. 一键部署 cdn、oss 等
5. 详细过程的云 devops 服务平台
6. 阿里巴巴云监控
7. 远程控制部件载入
8. 文本文档、单元测试卷的生成，比如 storybook
9. modern.js

汇总

前端工程化便是紧紧围绕迭代开发步骤，确保项目在团结协作环节中，能迅速做到交付规范，减少安全事故，关键从两步中来使力：审查、提前准备开发设计、设计阶段、公布交货、发布。

提早祝愿大家春节快乐，身心健康，看了喜欢的感觉有收获点个赞吧

在求职，求巨头收容