浅谈前端工程化介绍--模块化、组件化、规范化、自动化

  首先我们要明白工程化是一种思想而不是某种技术, 其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间等，

  也就是注重基本的开发效率、运行效率的同时，思考维护效率。

  再用一句通俗的话来概括前端工程化：前端工程化就是用做工程的思维看待和开发自己的项目,而不再是直接撸起袖子一个页面一个页面开写，所以，一切以提升前端开发效率，降低前端开发成本，提高前端应用质量为目标的工作都是“前端工程化”。

什么是前端工程化

  传统的软件开发过程是一个由文档进行驱动的过程，它将开软件开发过程分为可行性分析和项目开发计划、需求分析、概要设计、详细设计、编码、测试、维护七个阶段，每个阶段的输出是下一个阶段的输入。在每一个阶段，开发人员必须要完成这个阶段的任务，并编写文档，然后才能进入下一个阶段。具体到前端工程化，要解决的问题是如何提高编码->测试->维护阶段的生产效率。

  所谓工程化即系统化、模块化、规范化的一个过程。一般来说，前端工程化包含模块化、组件化、规范化、自动化四个方面。

一、模块化

模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块

模块化开发的4点好处：

• 避免变量污染，命名冲突
• 提高代码复用率
• 提高维护性
• 依赖关系的管理

  那具体什么是模块化呢？ “简单来说，模块化就是将一个大文件拆分成相互依赖的小文件，按一个个模块来划分，再进行统一的拼装和加载。【方便多人协作】” 前端的模块化包含js模块化、css模块化、资源模块化等方面。

具体说来：

• JS模块化方案很多有AMD/CommonJS/UMD/ES6 Module等,
• CSS模块化开发大多是在less、sass、stylus等预处理器的import/mixin特性支持下实现的

二、组件化

  首先组件化不等于模块化。模块化是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对用户界面的拆分。可以这样理解：页面上所有的东西都可以是组件，页面是大型业务组件，可以拆分为多个中型业务组件，然后可以再拆分成多个复合组件，复合组件再拆成多个基础组件，直到拆成Dom元素为止。

• 页面上的每个独立的、可视/可交互区域视为一个组件；
• 每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；
• 由于组件具有独立性，因此组件与组件之间可以 自由组合；

众所周知：React、Vue等，都是基于组件化思想的产物。

三、规范化

一般来说，前端规范化大体上可以分类为：

• 编码规范
• 开发流程规范
• 文档规范等

每个大类中又有一些子类，如编码规范中包含有目录规范、文件命名规范、js/css代码规范等，所以在项目规划初期制定的好坏对于后期的开发有一定影响。

四、自动化

https://developer.aliyun.com/article/450063

自动化是提升前端开发效率的利器，也就是简单重复的工作交给机器来做，前端工程自动化基本包含以下几方面内容:

• 图标合并
• 持续集成： 持续集成强调开发人员提交了新代码之后，立刻进行构建、（单元）测试。根据测试结果，我们可以确定新代码和原有代码能否正确地集成在一起
• 自动化构建
• 自动化部署
• 自动化测试

在软件系统开发的过程中，一个项目工程通常会包含很多的代码文件、配置文件、第三方文件、图片、样式文件等等主要是那些配置文件

碎碎念

所以现在有两个问题：

• 为什么我们需要前端工程化？
• 怎么做前端工程化？

https://juejin.cn/post/6889342911905792013#heading-7

随着企业业务的不断发展，业务线变的越来越多，我们面临的问题不仅仅是选择一个前端框架和技术，开发业务页面，支持单一业务那么简单，在多业务场景下，我们需要面对一些更为复杂的系统性问题：

• 多业务场景下，各业务线各自配置繁琐的构建打包配置，重复生产，耗时费力，且对于一些最佳实践无法方便的共享；

• 多业务场景下，各业务线在前端技术选型、技术方案上各自发展，技术方案不统一，技术复用率低，造成资源浪费；

• 多业务场景下，团队人员越来越多，如何方便的统一团队成员的编码规范，便于团队协作和代码维护是我们不得不考虑的一个问题；

• 当有新业务需要支持时，如何将现有的最佳实践、开发经验快速的复制出去，帮助更多的业务

面对上面的这些问题，打造适合我们自己的前端工程化体系的想法自然而生。