前言 #

就是说，经常会有人问：“你是做什么的？” 我们大多都会回答说：“前端工程师”

但是遇到特别较真的人，他还会追问：“什么是工程师啊？”

如果你也对这个问题表示一头雾水，那就跟我一起来学习一些前端工程化的知识吧。

前端工程 #

如果需要给前端工程这四个字下定义的话，我想，很多人都难以开口吧。尽管这四个字在我们平时的工作中可能每时每刻都在与其打交道。

近些年前端的更新迭代可是十分迅速，对应的，前端工程的定义也是不断的在推陈创出新，所以很难去下一个准确的，具体的定义。

我们先来参考一下软件工程的定义吧：

在《信息技术软件工程术语》一书中，将其定义为：应用计算机科学理论和技术以及工程管理原则和方法，按预算和进度，实现满足用户要求的软件产品的定义、开发和维护的工程，或进行研究的学科。

软件工程最初是为了应对软件危机而提出的对策，目的是将系统性的、规范化的、可度量的方法应用到软件的开发、运行和维护中。

软件危机是在开发大型项目的时候，由于开发周期长、成本高、复杂度高导致的成本不可控、难以维护等问题。

软件危机主要表现在以下几个方面：

• 项目逐渐庞大后导致的成本不可控，其中包含硬件成本和人力成本

• 项目性能和质量过低

• 项目不符合开发前的需求

• 项目代码质量太低导致难以维护

工程学是一门复杂到极致的学科，核心是结合实际建立科学的、规范的设计和生产流程，最终的目的是降低生产成本，提高生产效率。软件学作为一门新起之秀，在应对日益庞大的规模之时，正是缺乏工程学这种科学的方法论来帮助开发者在软件的整体生命周期中控制风险、降本增效。

所以人们将工程学的思想应用到了软件开发领域，以此来解决软件危机中遇到的问题，于是乎就有了软件工程。

同理，前端工程化指的就是：将工程方法系统化的应用到前端开发中，以系统、严谨、可量化的方法开发、运营和维护前端应用程序，目的是降本增效。

前端工程化的内容 #

往前推十年，前端可能还在JQuery和IE的漩涡之中，但是在2022，哦不，2023年，如今的前端领域拥有着琳琅满目的专业术语和纷乱错杂的生态圈，就连一个刚毕业的0.5级前端都需要了解Webpack/Vite、Babel、Node、Npm/Yarn/Pnpm、ES6/7/8...、React/Vue、Sass\Less、TS、WebGL等知识

精通前端？我想现在可能不会有人敢这么说了吧。

还记得V3刚出来的时候，我整个朋友圈的前端同学都是：我学不动了的哀嚎，可见，前端乃至于整个IT行业的频繁迭代对我们这些从业者提出了较高的要求。

从2005年AJAX的诞生和普及，使得前端从切图仔摇身一变成了工程师，在随着业务体量和复杂度的增长，前端不得不去考虑模块化和组件化。并且，随着开发队伍的壮大，又不得不去考虑团队之间如何高效合作、如何对代码进行复用、如何避免重复性的体力劳动、如何更高效的构建和部署等，都是前端工程化要去解决的问题。

现在的前端早已经步入工程化的阶段，我们需要用科学的方法论去避免之前提到的一些问题情况，所以我们对自己的要求就不止于“前端开发”，而是一名合格的前端工程师。

在我们平时的开发中，一个完整的迭代周期需要依次经过开发、测试、部署、发布这几个环节，并且在产品上线之后，我们还需要对产品进行稳定性保障也就是实时的监控和报警系统，避免出现问题。

下面来介绍几个阶段前端分别可以做的内容：

• 开发阶段

  • 脚手架

  • 公共库：维护可以复用的UI组件库或工具模板等公共资源

  • 包管理器：方便引入第三方库/插件

  • 构建工具：语法校验、编译等

  • 调试工具：本地服务器、热更新等

主要是通过建立各种规范以及需要的技术方案或者是工具

• 测试阶段

  • 测试框架：提供针对单元测试、快照等自动化测试支持

  • 静态扫描工具：可以进行开发规约/最佳实践或者代码质量等方面的静态检查

  • 性能测试工具：监控并统计性能数据

• 构建阶段

  • 编译：CSS预编译、ES6+ 、框架

  • 优化策略：代码压缩混淆、按需加载

  • 部署策略：Hash指纹、CDN配置

• 部署阶段

  • 如何自动化进行

• 监控阶段

  • 埋点平台：统计、分析业务数据，跟踪性能指标

  • 监控平台：观察线上的异常信息，包括接口请求成功率、报错、白屏、流量异常等