前端工程化简史

[nanxiaobei]

旧时代

以前，人们都是直接写 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 打包，对语法进行转换，用于抹平用户浏览器间的差异。

[kingjpa]

说的很好，但我还是喜欢 jquery 这种感觉，随时随地随便一台电脑， 拉取代码就能改。
一旦涉及工程，环境配置 ，文件夹路径，node 版本， 就要搞半天，烦的一批。

[hangbale]

写了这么多年前端 我还是怀念 jQuery

[cmdOptionKana]

自己玩小项目用 jQuery 完全够用。只是工作没办法，主流用啥就用啥。

[tuutoo]

写的真好. 现在用 Vite 那是真香.

[nomagick]

。。。无力吐槽

[hxtheone]

工程化没问题，问题是前端的工程化你永远不知道自己熟悉的工具链什么时候就过时了

同样怀念 jQuery 的不妨试试 Alpine.js ，一个 script 引进来就可以上手开干了

[hahasong]

"将新语法转为旧语法" 的工作就是多余的. 槽点满满

[DOLLOR]

冷知识，vue 可以不需要任何构建流程，直接引入一个 script 标签就能用。
所以我一点也不怀念用 jQuery+ES3 堆屎山伺候 IE8 的日子。

[LeeReamond]

@DOLLOR 确实，不是很理解楼上怀念 jq 的是什么心态，jq 时代也确实没有现代 js 标准。另外还有一个问题是用 jq 写东西难道写 mvc 网页，也许怀念的不是 jq 而是需求简单的年代

[laogui]

眼界开阔一些，Vite 在全球来说和 webpack 相比用户量可以忽略不计。而且 gulp 并没有被淘汰，很多小项目还是喜欢用。

[murmur]

webpack 挺好的，慢不是他的错，那是留给开发者喝水上厕所抽烟的时间

[ccyu220]

上面那些怀念的 jQuery 的，说的好像现在 jQuery 不可以用了似的。

除开 js ，没有工程化之前：

1 、单独引入处理 Polyfill
2 、单独用软件监听处理 sass 编译
3 、单独处理样式兼容性问题
4 、手动的处理 SVG 内联、雪碧图和压缩图片
5 、安全依靠自觉并且只有文件夹划分的代码规范
6 、处理缓存问题

90% 的人写的代码就好像在一个广场拉屎，拉的还是分散四处的屎，你还觉得你拉的很好看，想想都恶心

[micean]

工程化对于写后台管理这种玩意还是意义重大的，以前的 jquery 写的想死

[weiqk]

我也怀念 jQuery ，我没用过这些后现代的工具，大概率是出了问题很难定位，好像也没办法调试，遇到复杂一点的可能只有 console.log
大量引入未知不可控的第三方代码才是工程化的灾难
jQuery 至少流行了 15 年，这很说明问题，可以大胆的预估没有任何新工具可以生存 15 年，再过 15 年可能 jQuery 还很活跃

[murmur]

@weiqk 其实也挺好调试的，不过 chrome 对 sourcemap 的支持现在也一坨屎，有的地方打断点就是打不上去，debugger 就能停下来

[Mithril]

@weiqk 找个现代框架写个 hello world 试试就知道了，比如 Angular ，TS 过去一把梭，虽然还得编译，但调试什么的还是没问题的。

[kop1989smurf]

现在 web 工程化我觉得有两个问题亟待解决。

1 、没有统一的工程化标准。都在靠社区野蛮发展，你所使用的所谓“编译套件”已经是引用了不知道多少个第三方库之后的集合了。就像是一个违建林立的危楼，一旦其中的一个第三方库出现问题（停止维护、恶意攻击、不兼容等）对于开发者而言都是灾难性的。

2 、开发语言依然桎梏在 js/ts 上。没有一个“高级语言”的出现。（当然，换个角度考虑，证明了 js 短平快的先进性）

[DOLLOR]

@ccyu220
jQuery 时代还有个很重要的特征，就是要手工用字符串拼接 HTML 结构。
那年代可没有多行字符串语法可（``），也没有字符串插值（${}），全部只能用加号和引号小心翼翼地拼接。拼接完了还有 XSS 漏洞漫天飞。

[wbrobot]

@kingjpa
@hangbale
@cmdOptionKana JQUERY 的兄弟们,Vue 也可以单网页用的,且更好用啊....

[moreant]

@wbrobot 对头，单网页甚至能用上 Vant 这种 UI

[hangbale]

@wbrobot react ，vue 解决的问题是 dom 操作的复杂性，避免了手写一堆 dom 指令，用数据驱动 dom ，跟 jQuery 算是不相上下，毕竟 jQuery 依然活跃在世界上 70%的网站中。但是对前端来说，这个方案依然不够好，如果 HTML 支持可编程，或者有更好的跟 js 通信的方式，另外就是很多交互效果未来其实是可以让浏览器支持的，chrome 正在测试将任意 dom 变成 popup 的 api

[wangxiaoaer]

好久没关注前端，发现又有了 pnpm 、lenra 这种工具出来，看的脑壳疼。

借楼问一下，lenra 是用来管理多个软件包（模块）的项目，单是 pnpm 本身已经支持多模块项目了，二者结合有啥意义呢？

[nanxiaobei]

@wangxiaoaer 是指 lerna 吧，lerna 是最早的 monorepo 方案之一，现在已经不维护了也就是被淘汰了，可以认为过时了，建议用其它的

[wangxiaoaer]

@nanxiaobei 是 lerna 。 不维护了？我看 GitHub 的 commit 和 issue 都是近期的啊。 我是之前在本站看到一个 logto 的项目，看了下代码，发现是用的 pnpm+lerna 。

[nanxiaobei]

@wangxiaoaer https://juejin.cn/post/7101838968852840485

[wangxiaoaer]

@nanxiaobei 这明明就是换了个团队维护而已啊，咋特么就成了停止维护了，掘金竟然能容忍这种垃圾文章。

[gausszhou]

等等，jquery 一样可以用 webapck 和 vite 这些打包工具啊，这又不冲突

[erwin985211]

真有前端怀念 jQuery ？