一、前端工程化简介
我们整天在说前端工程化，那我我们思考一下，为什么会有前端工程化这个概念？
我们来一起回顾前端的发展历史，通过这个发展历史我们就能知道为什么会有【前端工程化】这个概念。
二、前端发展历史
看下面流程图我们可以看出来：
第一阶段：前端最早期的只是HTML、CSS、JS(此时只是前端发展的一个雏形，【JS】还没有模块化的概念)，随着页面发展我们发现一个页面引入太多JS脚本，将大大增加维护成本；
第二阶段：已经出现了模块的概念，会按照模块的概念进行拆分，我们如何拆分模块，如何放置这些模块？此时已经有了一个工程化的概念；
第三个阶段：模块已经划分出来，但是我们部署的时候还是想合并在一起，就涉及到了早期的打包处理；
第四个阶段：前端进一步复杂之后，前端需要承载的功能更多了，逐步开始进行前后端分离，前端也可以独立的开发了。此时前端也出来了一些新的概念，比如说：SPA、Angular、Vue等。此时就要开始考虑路由如何规划？开发时如何调试？开发完如何构建？构建完如何发布？这一切的东西才构成了【前端工程化的概念】；
三、 工程化整体流程
下图所示，就是我们从零开始整个前端工程化的考虑范围
- 从创建项目与开发阶段--> 我们要使用脚手架，对应的Eslint规范以及我们要使用什么UI组件库
CI--> 持续集成： 在一个集中的环境去构建我们的项目(避免不同协作人员环境不同带来的Bug)CD--> 持续部署
为什么开篇说到后端没有工程化的概念？
比如Java语言，他天生就是一种企业级的开发语言，他已经把上述流程包括在里面，不需要自己在去做这些基础建设；而JS是一门脚本语言，在不断开发不断迭代的进展中演变出了前端工程化的这个概念。
三、大厂工程化实践及开源方案
- 蚂蚁金服 开源的 UmiJS;
它提前预定好很多功能，我们可以做到开箱即用(包含基础配置比如路由、mock、构建(Webpack)、部署)。
-
阿里 开源的 飞冰 它和 UmiJS 一样也是基于React去设计的，飞冰比 UmiJS 内置的功能要更多一点，比如：数据请求、状态管理、日志打印、菜单配置等等。
-
字节跳动开源的 MODERN.js
MODERN 会比飞冰与UmiJS包含的内容更多一些，它是按照业务场景把功能做了一个更细致的分类，比如：正常网站、中后台、桌面应用、微前端等等，主要的是支持Vue。
四、总结
说白了，前端工程化就是被"复杂"逼出来的------代码越写越多，功能越搞越花，总不能一直靠复制粘贴续命吧？于是脚手架、打包工具、CI/CD 轮番上阵，把琐碎活全自动化。
如今大厂连方案都给你开源好了，照着抄作业就行。
记住：工程化的终极目标不是折腾工具，而是让咱能更优雅地摸鱼......更高效地搬砖！ 😎