随便聊聊

提到前端工程化，我想先说一说软件工程。一个完整的软件大致开发步骤应该是“需求分析 - 概要设计 - 详细设计 - 编码 - 测试 - 发布上线”的过程，当然，这只是一个理想化的开发模型，实际在各个公司内部肯定会做一些自适应的调整。但是不管怎么变，这个底层的思想是不变的。
如果说你只是一个人在开发一个简单的软件，一两个星期就能搞定的，那你完全可以按照自己的想法来开发。但是如果说这是一个大型复杂的软件，需要多人协作开发完成，那这个团队的每个人都遵循同一套规则会让软件开发更加的顺畅。
所以工程化是什么？工程化是一套方法论，通过一整套的规则和一些工具的使用让你的工作更加的高效、让多人协同更加的顺畅、也让最终的软件质量更加的可控。
回到前端工程化，随着万维网的发展，B/S 架构承载着越来越多的功能，前端工程化才开始进入我们的视野。为什么？当前后端分离之后，前端才作为一个单独的整体来看待；而当功能变得更加的复杂了之后，才需要一套方案来控制质量。
所以前端工程化的目的是解决因功能复杂带来的一系列问题。通过流程的优化、工具的使用、还有团队内的一些规则，来提高开发的效率和代码的质量。
但前端的问题并不仅仅在于功能的复杂，还在于前端的飞速发展。ES 的年度更新、TS 的横空出世、Sass、Less 的出现以及各种工具库，他们想让前端变得更简单，却让配置变得更加的复杂了。所以我们聊到前端工程化，总也离不开 Webpack（或者其它打包工具）。因为 Webpack 收敛了纷繁的工具。也因此，除了流程化、规范化之外，自动化也是前端工程化里很重要的一个方面。
让工具为开发者服务，而不是成为开发的阻碍。

几个重要的工具

• ESlint: 代码格式化工具，统一团队内的代码风格，降低代码风险。
• Webpack: 打包工具，将开发者的代码打包成浏览器可以识别的文件。
• DevOps: 流水线构建工具，自动化部署，开发者提交代码后自动部署到指定环境，用于后续的测试发布流程。
• git: 分支管理工具，便于项目的迭代开发。

参考资料

segmentfault - 浅谈前端工程化
浅析前端工程化