当前位置：首页 > news >正文

前端工程化概述（初版）

news 来源：原创 2025/7/27 1:20:46

阅前悉知
本文为《前端工程化》系列的首篇。由于本系列仍在撰写中，故其余文章暂不发布。您可以通过此链接查看其余已经完成文章：前端工程化专栏（完善中） | Jay 的博客
需要注意的是，尽管部分文章可以查看，但并不代表已经完成，且其中可能存在错误。

“前端工程化”，相信从事前端开发的朋友都或多或少头听过这一名称。当我们想在网上查找资料，深入理解“前端工程化”时，找到的大多数资料都是项目架构配置相关的文章。那“前端工程化”就等于“搭建项目架构”吗？对也不对！搭建项目架构是前端工程化重要且不可避免的一项工作，但前端工程化不仅仅局限于此。想要正在理解“前端工程化”，需要先搞明白“前端工程化”定义，然后通过定义推导出前端工程化需要做哪些事情。

前端工程化的定义

当我以“前端工程化”工程化为关键字进行查找，得到的结果都没法让我比较清晰的理解。要么没有对“前端工程化”这一名词做解释；要么把前端工程化所要做的事情当作释义。

前段时间我看过孟琢老师写的《汉字就是这么来的：字里字外的动物王国》一书，他通过“拆字法”浅显易懂、条理清晰的解析了我们中国汉字的由来以及发展脉络。于是我就想，是不是也可以采用“拆字法”来解析“前端工程化”呢？当然，这里并不是要把这五个汉字进行性拆解，而是对“前端工程化”这一名词进行拆解分析。

接下来开始拆解。

拆字法解析

初看，我们可以很轻易的将“前端工程化”可以拆解成两个独立的词组，即，“前端”、“工程化”。因为我们对“前端”一词的含义是很清晰的，指的就是我们所认知的前端开发领域。所以，无论对错，先这样拆解。接下来，解析两个词组的含义。

"前端"的解析

“前端”，应解释为“前端开发”，是指创建 Web 页面或 APP 等前端界面呈现给用户的过程。

前端开发-百度百科解析：

前端开发是创建WEB页面或 APP 等前端界面呈现给用户的过程，通过HTML，CSS 及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

“工程化”？好像不太好解析。“工程”大概知道是什么，“工程化”不懂！既然无法理解，那就进一步拆解，将其分为“工程”和“化”两部分。这次我们先来解析“化”字（不要问为什么不先解析“工程”，因为“工程含义太复杂”）。

“化”的解析

“化”字在字典上的解析如下：

基本字义

huà
性质或形态改变：变～。分～。僵～。教（jiào ）～。熔～。融～。潜移默～。～干弋为玉帛。。
佛教、道教徒募集财物：～缘。～斋。
用在名词或形容词后，表示转变成某种性质或状态：丑～。绿～。
习俗，风气：有伤风～。
特指“化学”：～工。～纤。～肥。

huā
同“花”。

摘自《化的解释|化的意思|汉典“化”字的基本解释》

上面的释义比较贴切的是：“用在名词或形容词后，表示转变成某种性质或状态：丑～。绿～。”。“工程化”则可以理解为向“工程”转变。

“工程”的解析

先来看字典关于“工程”的解析：

工程的解析

工程是科学和数学的某种应用，通过这一应用，使自然界的物质和能源的特性能够通过各种结构、机器、产品、系统和过程，是以最短的时间和最少的人力、物力做出高效、可靠且对人类有用的东西。将自然科学的理论应用到具体工农业生产部门中形成的各学科的总称。

摘自：《工程的解释|工程的意思|汉典“工程”词语的解释》

通过上面的解析可知，工程的核心是采用各种科学的工具以及手段来快速高效的产出目标产物。

“前端工程化”的含义

现在，我们需要将“前端”、“工程”、“化”三者的含义结合起来理解。

“工程化”=“工程”+“化”，可以理解为：向“采用各种科学的工具以及手段来快速高效的产出目标产物”的工作方式转变。

“前端工程化”=“前端”+“工程化”，可以理解为：创建 Web 页面或 APP 等前端界面呈现给用户的过程，向“采用各种科学的工具以及手段来快速高效的产出目标产物”的工作方式转变。

上面的解释比较生硬，不过大致的意思已经很清晰了。稍加润色：

"前端工程化“的含义

在进行前端开发的工程中，采用科学的理论知识、先进的生产工具、高效的工程管理手段，从而实现以最短的时间和最少的人力、物力产出高效、可靠、可用的互联网产品用户交互界面。

所要作的工作

在讲“前端工程化”的工作前，我们先来回答开篇的问题：“前端工程化”就等于“搭建项目架构”吗？

“前端工程化”的目的是：采用科学的理论知识、先进的生产工具、高效的工程管理手段以最短的时间和最少的人力、物力来完成开发工作。所以这个问题的答案是“前端工程化”不等于“搭建项目架构”。项目架构仅仅是提高开发效率的一个途径。我们还有很多手段方法理论来优化前端开发的过程。

“工程科学”是一门复杂的高度专业化的科学。我并非专业的工程科学家，仅是一名普通的开发者。所以我无法以系统、全面的理论知识来讲述前端工程化需要做哪些工作。仅能凭借自身的开发经验以及网路上搜罗来的知识进行总结梳理需要所哪些工作。

以下是我总结的前端工程化需要做的一些工作：

项目组 SOP 的制定（工作流程）
UI 标准化、模块化
统一主题样式的开发
组件库开发
前端项目架构搭建（eslint、webpack 配置、项目目录的组织）
编码规范的制定
版本管理
分支管理
代码审核
git 使用规划
CICD 脚本
单元测试

关于 SOP 的制定

SOP（ Standard Operating Procedure）即标准作业程序。规定了项目开发流程了标准操作步骤。SOP 是工程化的前置条件。工程化是对 SOP 中可以脚本化自动化的工作项的提炼，是 SOP 的补充扩展以及完善。两者密不可分，相辅相成。