刚写前端的时候，总觉得有很多概念不清楚，也不清楚他们之间的关系，例如vue、vite、rollup的关系是什么？在这里把所有的概念梳理一下，方便新入门前端的同学。

nodejs

首先，前端最最核心的一个东西是nodejs。

想象一下，你写了一段js代码，需要运行，如果在chrome浏览器里面，这些代码的运行是交给chrome的V8引擎。在浏览器之外，就可以使用nodejs。

js并非只有在网页上使用这一个唯一的场景，ts也可以写后端。

包管理工具：npm、yarn、pnpm

有了 Node.js，我们就能在电脑里离开浏览器运行 JavaScript。可是光有引擎还不够，前端生态的“依赖包”（比如别人写好的库）要怎么领进来、管理好？这就要用到包管理工具了。

最常见的有三个：

1. npm

Node.js 官方自带的包管理工具，也是最传统的选择。优点是绝大多数项目都支持，缺点是很慢。

2. yarn

yarn是Facebook 推出来的包管理器，解决 npm 早期的速度/一致性问题。yarn有多个版本，其中v1用法和 npm 很像，但是速度更快，依赖锁定机制也更好一些。

但是，v1版本用起来和npm很像，也就注定它必然有npm的缺点，例如巨大的粪坑node_modules文件夹。为了解决这个问题，yarn后续版本已经退出了pnp的依赖管理模式，使用一个压缩包而不是node_module文件夹管理依赖。

yarn1已经停止更新，最新的版本停在了1.22.22.截止本文撰写，yarn最新大版本是4，但是经过笔者实际尝试，目前yarn4与现有项目适配较差，尤其是使用vite+vue的项目，报错很多基本无法正常运行。

3. pnpm

一个后来者，优势是更加节省硬盘空间（通过硬链接的方式管理依赖包），在 monorepo 多包项目里尤其有优势。

三者都能完成“下载安装第三方库、管理版本、清理依赖”等任务。

打包工具：esbuild, rollup, webpack

构建工具：Vite, Webpack DevServer

UI框架：Vue, React, Angular

模块化规范：ESM, CommonJS, AMD