如何简单理解前端工程化？

你好，我是沐爸，欢迎点赞、收藏和关注！​个人知乎、公众号"沐爸空间"
​

1.什么是前端工程化？

前端工程化是指将前端开发过程中的一系列流程进行规范化和自动化。

2.为什么做前端工程化？

因为前端工程化可以提高开发效率、提高代码的质量和可维护性。

3.如何实现前端工程化？

前端工程化的实现主要包括以下几个方面：规范化、组件化、模块化、自动化。

3.1规范化

规范化是保证代码质量和可维护性的重要手段，主要包括 Git 分支管理、commit 规范、编码规范、接口规范等。

常见的规范化实现方式：
（1）可以通过在 Git 仓库后台配置、手动配置 Git Hooks，或者使用 husky 和 commitlint等工具的方式，在提交代码时强制检查，校验 commit message 是否符合规范。
（2）借助前端自动化工具（如ESLint、StyleLint、Prettier等）可以自动格式化代码和修复错误，帮助开发者规范代码的书写风格，提高代码的一致性和可读性。

3.2组件化

组件化开发可以减少重复代码，提高代码的可复用性和可维护性。项目中使用频率高或具有共性的功能模块，都应该抽象成组件。

不难理解，相同的代码复制10遍和抽象成一个组件相比，在修改bug或功能优化时，组件更方便维护，开发效率更高，因为组件只需要改一遍。

要实现前端组件化，前提是使用的开发框架支持组件化开发，现在的前端主流框架React、Vue等基本都支持组件化开发。另外，可以借助前端主流 UI 框架，如Element Plus、Ant Design、View Design等，它们都提供了大量常用组件，这样可以避免重复造轮子。当然也可以根据需要，在这些框架的基础上进行二次封装，也可以不借助 UI 框架开发属于自己的私有组件库。

3.3模块化

前端模块化就是将复杂程序根据一定规范拆分成若干模块，一个模块通常包含导入和导出。

模块化和组件化有些相似，都是为了减少重复代码，提高代码的可复用性和可维护性。两者的区别在于：

• 组件化更强调组件，一般关联视图，常包括模板、样式和逻辑。
• 模块化更强调功能，一个模块对应一项功能，不一定关联视图，比如 js 中对 axio 的封装。

模块化也有自己的规范。在 Node 开发中通常用 CommonJS 规范，在浏览器中用 ES Module 规范。

3.4自动化

什么是自动化？自动化就是使用工具或技术来执行任务，而无需太多人为干预。很显然自动化可以极大地提高开发效率。
前端工程的自动化包括：自动初始化、自动化构建、自动化测试、自动化部署。

3.4.1自动初始化

自动初始化，多体现在使用脚手架搭建项目。脚手架可以自动化地生成项目的基础结构、文件和配置，避免了开发者从零开始手动搭建项目的繁琐过程。这可以大大节省项目初始化阶段的时间和精力，让开发者能够更快地投入到实际的业务开发中。

3.4.2自动化构建

使用自动化构建工具（如Webpack、Vite、Rollup等）将源码编译、压缩、合并、打包等操作自动化处理，以生成可部署或上线的最终代码。这些工具能够自动化完成大量重复性的工作，减少手动操作的时间和错误。

3.4.3自动化测试

采用自动化测试工具（如Jest、Mocha、Selenium）对前端代码进行单元测试、集成测试、端到端测试等，可以确保代码的质量和功能的稳定性，减少后期调试和修复的时间。

3.4.4自动化部署

使用持续集成/持续交付（CI/CD）工具和流程，实现代码的自动部署和发布，出现错误可快速回滚，提高开发效率和产品的快速迭代能力。常用 CI/CD 工具有 Jenkins、Kubernetes (K8s) 等。

关联文章：
如何校验 commit message 是否符合规范，这有四种方式