工程化概述

这节课会包含如下两个内容：

• 什么是工程
• 工程化和构建工具的关系

什么是工程

当你看不懂一个词语的时候，有一个最好的方式就是拆词。“工程”只能拆解成两个字“工”和“程”。

• 工：一项一项的工作，要做的事情
• 程：程就是指的程序、流程，做事情的先后步骤。

“工程”就是指一件事要做的步骤非常非常多，并且每一个步骤是有先后的顺序。

工程这个词最早不是出现在我们 IT 行业，出现在建筑行业，因为建筑行业里面，例如修楼，里面包含了一系列繁杂的工作，并且每一项工作是有先后顺序的，所以才有了建筑工程的概念。

后面软件开发就引入了“工程”这个概念，随着我们软件规模越来越大，要做的事情也是越来越多。大学里面还有一个专业“软件工程”。

现在前端开发慢慢也出现了“前端工程化”的概念。因为咱们前端要做的事情，并且能做的事情也越来越多了。从一开始构建整个项目、到编写代码、如果是使用一些其他工具（less、sass、ts、coffeescript）编写的，还涉及到编译、测试、打包，能罗列出来的事情有一大堆，不像以前只是写一两个页面就完事儿。

工程化和构建工具

在向着工程化靠近的路上，出现了构建工具，很多人直接将工程化和构建工具划等号，这个其实是不对的。前端工程化 != 前端构建工具。

因为严格的来讲，工程化实际上是一套方法论，目的是解决大型项目和团队协作中遇到的代码维护和扩展问题，目标是为了提高开发效率、代码质量和可维护性。

而前端构建工具只是前端工程化里面的一环，不能够划等号。

接下来我们来稍为说一下关于构建工具。

前面我们有提到，前端目前要做的事情是越来越多了，实际上有一部分工作是和业务逻辑无关的

• 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
• 代码转换：将 TypeScript/ES 6 编译成 JavaScript、将 SCSS 编译成 CSS 等。
• 代码优化：为 CSS 代码添加兼容性前缀等。

这些工作虽然和业务逻辑无关，但是你又不得不做。

既然这些工作都要做，那么谁来做这些事情？

这里我们会通过一些工具来完成这些事情，但是这里又遇到一个问题，往往上面的这些事情需要好几个工作来完成。这里就会存在一种情况：需要先将项目拖入到工具 A 进行处理，拖入到工具 B 进行处理、C、D、E...

上面的步骤显得非常的麻烦，我们期望有那么一个工具能够帮助我们把上面的事情按照一定的顺序自动化的完成，这个工具就是我们前端构建工具。

总的来讲，“构建工具”里面“构建”二字是一个重点，这个工具究竟构建了一个啥？

将我们开发环境下的项目代码构建为能够部署上线的代码。

通过构建工具，我们就可以省去繁杂的步骤，直接一条指令就能将开发环境的项目构建为生产环境的项目代码，之后要做的就是部署上线即可。

目前前端领域有非常的多的构建工具，整体来讲可以分为三代：

• 第一代构建工具：以 grunt、gulp 为代表的构建工具
• 第二代构建工具：以 webpack 为代表的构建工具
• 第三代构建工具：以 Vite 为代表的构建工具