聊聊前端工程化

目前来说，Web 业务日益复杂化和多元化，前端开发从 WebPage 模式为主转变为 WebApp 模式为主了。前端的开发工作在一些场景下被认为只是日常的一项简单工作，或只是某个项目的"附属品"，并没有被当做一个"软件"而认真对待（无论是产品负责人还是开发者）。

在模式的转变下，前端都已经不是过去的拼几个页面就能完成。当工程复杂就会产生许多复杂的问题，比如：

1.如何进行高效的多人协作？2.如何保证项目的可维护性？3.如何提高项目的开发质量？4.如何降低项目生产的风险？

前端工程化是使用软件工程的技术和方法，来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间。

前端工程化就是为了让前端开发能够“自成体系”，个人认为主要应该从模块化、组件化、规范化、自动化四个方面思考。

模块化：简单来说，模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。

组件化≠模块化。模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对UI（用户界面）的拆分。

其实，组件化更重要是一种分治思想。

页面上所有的东西都是组件。页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件，小型组件也可以再拆，直到拆成 DOM 元素为止。DOM 元素可以看成是浏览器自身的组件，作为组件的基本单元。

规范化其实是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量。

前端自动化主要有持续集成和持续部署，在 CI/CD 流程中，只有步骤1和步骤2需要人工操作，其他步骤都是自动运行，是一个非常标准化的流程，减少了人工操作的风险，省去了重复性工作，增强了项目的可见性。我们通常使用配置 jenkins 和 gitlab webhook 来实现这个流程。