---
url: https://sugarat.top/interview/other/engineering.md
---

# 前端工程化

前端工程化就好比修房子:

原来`一个人修茅草屋`转变为`一群人修楼房`

`楼房`不仅是外观好看而且质量更高,可拓展性也强

如果用`修茅草屋`的方式去`修楼房`,不仅效率地下,也会为日后埋下无穷的隐患

> 目前来说，web业务日益复杂化和多元化，前端开发从WebPage模式为主转变为WebApp模式为主了

在模式的转变下，当工程复杂就会产生许多问题，比如：

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

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

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

**可采用的方式**

* 模块化
  * js模块化
  * css模块化
  * 静态资源模块化
* 组件化
  * 页面组件化
* 规范化
  * 目录结构
  * 编码规范
  * API规范
  * Git提交规范
  * 技术文档规范
  * ...
* 自动化
  * 自动化测试
  * 自动化部署
  * 自动化构建

## 模块化

> 模块化只是在文件层面上，对代码或资源的拆分

将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载

### js模块化

* CommonJS:最早是 Node 在使用，目前也仍然广泛使用(Webpack)Node 中的模块管理已经和 CommonJS 有一些区别
* ES Module:原生实现的模块化方案
* AMD/CMD:目前很少使用
  * 使用过的系列中[RequireJS](https://requirejs.org/) 使用AMD规范

### css模块化

* sass/less/stylus:文件拆分
* css module:使用js管理依赖(如:Vue scoped style)

> SASS、LESS、Stylus等预处理器实现了CSS的文件拆分，但没有解决CSS模块化的一个重要问题：**选择器的全局污染问题**

### 静态资源模块化

* webpack
  * css,图片,字体等等文件统一使用js控制依赖
  * 使用loader对各种资源做各种事情

## 组件化

> 而组件化是在设计层面上，对UI（用户界面）的拆分。

从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元

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

## 规范化

> 约定优于配置

* 项目目录结构
* 编码规范
  * html
  * css
  * js
  * 命名
* API接口规范
* 前后端分离
* git commit规范
* 文档规范
* ...

## 自动化

> 任何简单机械的重复劳动都应该让机器去完成。

* 图标合并
* 持续集成
* 自动化构建
* 自动化部署
* 自动化测试

:::tip 参考
[前端工程化的理解](https://www.jianshu.com/p/88ed70476adb)
:::