前端工程化简史

旧时代

以前，人们都是直接写 HTML、CSS、JS，甚至不用编辑器，打开记事本直接写完保存就行。

在这个时代，是没有 "工程化" 这个东西的，JS 还跟它的名字一样，是个 "Script"，对网页锦上添花。

这个时代的霸主是 jQuery，因为简化了 DOM 操作写法、抹平了浏览器差异，所以被广泛使用，一直到现在。

随着 Web 2.0 兴起，网页从 "只读" 变成了 "可读写"，承担的功能不断变多，之前简单的几行 JS 变成了一大堆 JS 文件。

同时，JS (ECMAScript) 语法在发展，很多新的语法出现，但用户的浏览器版本参差不齐，无法支持新语法，而开发者又想使用这些新语法。

如果在开发时直接写 JS 新语法，如何组织庞大的 JS 项目呢？

前端工程化就出现了。简单来说，"工程化" 就是为了抹平 "开发" 和 "运行" 的差异。

就像我们可以直接写汇编语言，但开发体验差，所以出现了各种高级语言来抹平 "开发" 和 "运行"。

我们也可以直接写 JS 旧语法，但开发体验差，所以出现了前端工程化来抹平 "开发" 和 "运行"。

webpack 自同时代的 grunt、gulp (均已淘汰) 发展而来，在短短一两年内一统江湖，统治了 Vite 出现之前的前端工程化。

在 2021 年 Vite 出现之前，webpack 几乎就是前端工程化的代名词。

webpack 是一个工具，把自己写好的 JS、CSS 等传入，webpack 会对其进行编译，并输出打包好的可直接在浏览器运行的文件。

理论上，webpack 可以处理任意格式的文件，只需要配合不同的 loader，例如 babel-loader，css-loader 等。

但 webpack 有一个显著的特点，就是 "慢"，其在本地开发时，也会对所有文件进行编译。

而其实开发者的浏览器一般都是最新的，理论上已经支持了最新 JS 语法，那么这个 "将新语法转为旧语法" 的工作就是多余的。

Vite 正是基于这一点，提出了新的工程化思路。

Vite 并不是一个 "独立" 的工具，其相当于对现有工具的一个整合。

在本地开发时，Vite 使用 esbuild 打包 (esbuild.github.io/)，esbuild 使用 go 编写，比 JS 编写的工具更快，这是 Vite 可以显著提升本地开发速度的关键。

在构建项目时，Vite 使用 rollup 打包，对语法进行转换，用于抹平用户浏览器间的差异。