浅谈前端工程化

前言：
前端工程化的源动力- 为企业开发降本提效；
前端工程化是指将系统化的、规范的、可度量的方法应用于前端的开发、运营维护过程中去。它的意义：帮助前端工程进行技术选型、统一规范管理、测试、构建和部署等
前端工程化的范畴应该包含四化：

1. 模块化
2. 组件化
3. 规范化
4. 自动化

本文主要针对以上的四化展开简短的论述。旨在让大家简短了解一下概念

1. 模块化

模块化是一种思想或者叫规范。可以理解为代码功能的拆分，本质就是将一个个功能封装成一个独立的小模块，这个模块内部实现是私有的，只向向外提供接口与其他模块进行通信。
模块化的作用是

1. 提高代码的复用性、可读性、可维护性；
2. 解决了全局变量污染、命名冲突、繁琐的文件依赖的问题；

目前前端针对于 javascript ，主流模块化语法是 ES Module （import /export） 来实现的。
当然还有资源整合模块化工具- 例如 webpack 是一个模块打包工具，能将任何资源转换为 js 代码进行倒入，它需要使用一些加载器（loader）去识别不同的文件转化成 JS 代码导入。

2. 组件化

组件化可能更偏向于 前端 UI 功能，将一个大型程序拆分成多个相互独立的小组件，每个组件是一个特定的 UI 功能。作用和 模块化类似 ：复用性、可维护性更高
这一块对于前端开发人员相对来说是最为熟悉的，尤其是使用过 Vue.js 开发的小伙伴。这里不再展开。

3. 规范化

我们可以将这一块理解为 团队内统一的风格，因为规范化的前提是团队内部成员达成的共识，并且按约定开展工作，提高工作效率。例如如下（不仅限于此）范畴：

1. 项目目录结构；
2. 命名规则（文件/变量/函数名称等）；
3. 代码风格（JS/html/css）；
4. 注释规范；
5. 数据请求规范；
6. git 协同规范；

帮助实现这些规范可以使用一些技术或者工具，比如：

1. TypeScript 类型规范；
2. ESLint 检测JS 代码的质量和风格；
3. commitlint 等；

4. 自动化

这些偏向于工具类的东西了，比如：

1. Vitest 测试用例
2. 端到端测试
3. 包管理工具、打包工具
4. Jenkins 持续集成持续交付/部署工具等