【前端工具链小白篇】前端工具链全景：Node、npm、Vite 各管什么

​ 刚开始做前端的人，命令行里冒出一堆名词：Node、npm、Vite、package.json、node_modules/……最容易懵的不是“不会用”，而是：它们之间到底谁管谁？

​ 这篇不讲具体的应用，只把四者的关系理清楚。读完你应该能回答这几个问题：

• 为什么装 React 要先装 Node？
• 为什么是 npm install，而不是 vite install？
• npm run dev 到底是谁在跑？

一、一切的起点：浏览器其实很“挑食”

​ 浏览器只认识三样东西：HTML、CSS、JavaScript。但今天写网页早就不是直接写这三样了。

​ 你会看到大家用：

• TypeScript（带类型的 JS）
• JSX / TSX（HTML 写在 JS 里）
• SCSS / Less（带变量和嵌套的 CSS）
• import 一堆第三方库（React、antd、lodash……）

​ 浏览器完全看不懂这些。比如你直接打开一个 .tsx 文件，浏览器只会报错。所以中间需要一个"翻译官"，把这些现代写法编译成浏览器能跑的 HTML/CSS/JS。这个翻译官就是打包工具。

二、Vite：打包工具代表

​ 历史上的打包工具有 webpack、Parcel、Rollup、esbuild、Vite……名字可以先不记，重点是它们干的是同一件事：把我们写的现代代码（TS/JSX/SCSS/import）→ 编译/合并/压缩 → 变成浏览器能跑的东西。

这张图是整个系列的问题起点：浏览器原生只认 HTML/CSS/JS（右栏），但你写的早就不是这些了（左栏），所以中间永远需要一台"翻译官"。本系列接下来要讨论的所有命令、配置、报错，本质都是在围着这台翻译官转。

​ Vite 是目前最流行的一个，特点是启动快、热更新快、配置简单。本系列默认用 Vite，但概念在别的工具里也通用。

​ 除此之外，Vite 还顺便提供了一个开发服务器，也就是我们常见的：http://localhost:5173/。当我们运行npm run dev，实际发生的是：Vite启动服务器，开发服务器一边监视你的源码，一边把编译好的代码喂给浏览器，你改一行保存，浏览器立刻看到效果，这其实就是“热更新”的本质。

三、Vite 自己跑在哪里？答：Node.js 上

​ Vite 是一个 JavaScript 程序。可问题来了：JavaScript 不是只能在浏览器里跑的吗？

​ Node.js 就是为了让 JS 跳出浏览器，能在我们的电脑上当普通命令行程序跑。可以把 Node 想成"JavaScript 的运行环境"，类似 Python 运行 .py 文件。Node就是让JavaScript 可以在命令行运行，而不是只能在浏览器里。

​ 所以整个链路如下：

你的代码 → Vite（打包工具，是个 JS 程序）→ 跑在 Node.js 上 → 输出成浏览器能看懂的 HTML/CSS/JS

​ 由此可见，如果电脑上没装 Node，前端工具一个都跑不起来。因此。前端开发第一步永远是"先装 Node.js"。

四、 npm：Node 自带的"包管家"

​ 装好 Node 之后，你会自动得到一个可以在命令行中直接使用的工具：npm。

​ npm = Node Package Manager，Node 的包管理器。它主要负责安装以依赖和运行脚本。

4.1 安装依赖

​ 把第三方库下载到你的项目里：

npm install react
npm install vite

​ 为什么命令是 npm install vite 而不是 vite install？因为 Vite 本身也是用 npm 安装的。也就是说，npm 是“安装一切的起点”。

​ 同类工具还有 pnpm、yarn、bun，命令几乎一样，本系列统一用 npm。

4.2 运行脚本

​ 启动项目 / 打包项目：

npm run dev
npm run build

​ Node.js 让 JS 能在你电脑运行，Node自带的npm负责安装工具，用 npm 安装 Vite，Vite 把你的代码翻译给浏览器。

五、 全景图

​ 把上面四个角色画在一起：

​ 这张图的关键是自下而上的依赖关系：没有 Node 就没有 npm，没有 npm 就装不了 Vite，没有 Vite 就跑不了你的项目。所以装环境的顺序是反着来的。先安装Node，之后npm 自动到位，再利用 npm 装 Vite，最后可以用Vite 跑你的项目。

5.1 命令流程

​ 从零到看到第一个页面，命令是这样串起来的：

步骤	命令	任务说明
1. 装 Node	去 nodejs.org 下载装上	让电脑能跑 JS 程序
2. 创建项目	npm create vite@latest	让 npm 拉一个 Vite 模板，问你几个问题（项目名、用 React 还是 Vue、TS 还是 JS）
3. 进项目目录	cd 你的项目名	后面所有命令都得在项目根目录跑
4. 装依赖	npm install	下载项目依赖，照着 package.json 把项目需要的库全下载下来
5. 启动开发服务器	npm run dev	Vite 起一个本地服务器，浏览器打开 http://localhost:5173/ 看效果

​ 一般来说，前3步只做一次，后2步会反复用。每次 git clone 别人项目、或者 package.json 变了，都要再 npm install；每次开始写代码都要 npm run dev。

5.2 名词说明表

名词	是什么	核心作用
Node.js	JS 运行环境	让 JS 能在本地跑
npm	Node 自带的包管理器	下载 & 管理依赖
Vite	构建工具	编译代码 + 起服务器
package.json	配置文件，项目根目录里那个 JSON 文件	记录依赖和脚本
node_modules/	npm 下载下来的所有第三方代码	放所有第三方库。跑完 npm install 多出来的几百 MB 文件夹
package-lock.json	锁定每个依赖的精确版本	跟 package.json 一起进 git
React / Vue	UI 库，决定你怎么写组件	创建项目时选一个，后续代码都围着它转

六、总结

​ Node.js 让 JS 能在你电脑运行 ，Node 自带的 npm 负责安装工具，用 npm 安装 Vite， Vite 把你的代码翻译给浏览器。可以用盖房子类比来，其中Node 是地基，npm 是管家，Vite 是施工队，你的项目是房子。

装环境时，从下往上：Node → npm（自动）→ Vite（用 npm 装）→ 你的项目（用 Vite 起）。