前端工程化简史

旧时代

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

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

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

为什么要 "工程化"？

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

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

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

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

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

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

webpack

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

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

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

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

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

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

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

Vite

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

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

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