工程化介绍

什么是前端工程化？

前端工程化是一种思想，而不是某种技术。主要目的是为了提高效率和降低成本，也就是说在开发的过程中可以提高开发效率，减少不必要的重复性工作等。

tip 现实生活举例
建房子谁不会呢？请几个工人一上来就开始弄，在建筑的过程中缺了材料就叫个工人去买，发现工期快到了来不及了，就马上多请几个人回来弄。客户又说这里改改，那里改改。最终却是可以把房子建起来，但是很容易出现问题，出现问题了又是谁的责任。

这种最多也只能称为建房子，而建筑工程却不一样，按照工程的流程应该是这样的，首先会画图纸、确定房子的结构、确定用料和预算以及工期，另外需要用到什么工种以及多少工人等等，一般都是先打地基在建框架再填充墙体，这样捡起来的房子才会更加的稳固。

出现问题也可以快速定位到源头和负责人。这里只是举个例子，我也没有做过建筑工程。

借鉴上面的工程化思想，可以得出来我们前端工程化需要具备模块化、组件化、规范化、自动化四个方面。

模块化

模块化就是把一个大的文件，拆分成多个互相依赖的小文件，按照一个一个模块来划分。在前端领域上就是把 JS 复杂的逻辑代码拆分成多个简单的模块，在组合成一个功能。

组件化

跟模块化很类似，在前端领域上，例如页面就可以看成是一个大的组件，这个大的组件可以拆分成多个中型组件，中型组件还可以继续在拆分成多个小型组件。

组件化 ≠ 模块化。模块化只是在文件层面上，对代码和资源进行拆分。组件化是在设计层面上，对 UI 视图部分的拆分。

规范化

在项目规划初期制定的好坏对于后期的开发有一定影响。

包含以下规范：

• 目录结构的制定
• 编码规范
• 前后端接口规范
• 文档规范
• 组件管理
• Git 分支管理
• Commit 描述规范
• 定期 codeReview
• 视觉图标规范

自动化

也就是简单重复的工作交给机器来做，自动化也就是有很多自动化工具代替我们来完成，例如持续集成、自动化构建、自动化部署、自动化测试等等。

原文链接：菜园前端