前言

很多前端初学者会遇到一个困惑：

我只是想写 HTML、CSS、JavaScript，为什么还要学 Node.js？为什么安装项目要用 npm、yarn、pnpm？为什么运行项目又会看到 Vite、Webpack？

这些工具看起来很多，其实它们各自负责的事情并不一样。简单来说：

• Node.js：让 JavaScript 可以运行在浏览器之外。
• npm / yarn / pnpm：管理项目依赖和运行脚本。
• Vite / Webpack：负责前端项目的开发服务器、打包、构建和优化。

如果把前端项目比作一家餐厅：

• Node.js 是厨房环境。
• npm / yarn / pnpm 是采购系统，负责买食材。
• Vite / Webpack 是厨师和出餐流程，负责把食材加工成最终菜品。
• 浏览器是顾客，最终吃到的是 HTML、CSS、JavaScript。

这篇文章就用简单易懂的方式，把它们之间的关系讲清楚。

一、Node.js 是什么？

1. JavaScript 最开始只能运行在浏览器里

以前 JavaScript 主要运行在浏览器中，比如：

<script>
  console.log("Hello JavaScript");
</script>

浏览器中有 JavaScript 引擎，比如 Chrome 的 V8 引擎，负责解析和执行 JavaScript 代码。

但是浏览器里的 JavaScript 能力有限，它主要用于操作页面，比如：

• 操作 DOM
• 处理点击事件
• 发送 Ajax 请求
• 操作浏览器缓存

它不能直接做很多服务端或本地系统相关的事情，比如：

• 读取本地文件
• 启动一个服务器
• 操作数据库
• 执行构建脚本

2. Node.js 让 JavaScript 可以运行在服务端和本地环境

Node.js 的出现，让 JavaScript 不再只能运行在浏览器里。

Node.js 基于 Chrome V8 引擎，同时提供了很多系统能力，比如：

• 文件读写
• 网络请求
• 启动 HTTP 服务
• 执行命令行工具
• 管理项目依赖
• 构建前端项目

例如：

console.log("Hello Node.js");

保存为 index.js，然后执行：

node index.js

这段 JavaScript 就可以在本地终端中运行，而不是在浏览器中运行。

3. 前端为什么要安装 Node.js？

很多人会问：

我写的是前端页面，为什么要安装 Node.js？

原因是现代前端项目已经不只是几个静态文件了。现代前端开发通常需要：

• 安装第三方库，比如 Vue、React、Axios
• 启动本地开发服务器
• 编译 TypeScript
• 处理 Less、Sass
• 压缩 JavaScript 和 CSS
• 打包项目上线
• 执行 lint、test、build 等脚本

这些事情都需要一个本地运行环境，而 Node.js 就提供了这个环境。

所以可以这样理解：

Node.js 是现代前端工程化的基础运行环境。

二、npm、yarn、pnpm 是什么？

1. 它们都是包管理工具

在前端项目中，我们经常会使用第三方库，比如：

npm install axios

安装之后，就可以在代码中使用：

import axios from "axios";

axios.get("/api/user");

这里的 axios 就是一个第三方包。

而 npm、yarn、pnpm 的作用就是：

• 安装依赖
• 删除依赖
• 更新依赖
• 管理依赖版本
• 执行项目脚本

它们都属于 JavaScript 的包管理工具。

2. npm 是什么？

npm 全称是 Node Package Manager，是 Node.js 官方自带的包管理工具。

安装 Node.js 后，一般会自动带上 npm。

常用命令：

npm install
npm install axios
npm uninstall axios
npm run dev
npm run build

npm 是最常见、最基础的包管理工具，很多项目默认都可以用 npm 来安装和运行。

3. yarn 是什么？

yarn 是 Facebook 推出的包管理工具，主要是为了解决早期 npm 的一些问题，比如：

• 安装速度慢
• 版本不够稳定
• 依赖解析不够一致

yarn 的常用命令：

yarn
yarn add axios
yarn remove axios
yarn dev
yarn build

yarn 和 npm 的功能类似，只是命令写法略有不同。

4. pnpm 是什么？

pnpm 是现在很多项目非常喜欢用的包管理工具。

它最大的特点是：

节省磁盘空间，安装速度快，依赖管理更严格。

传统 npm 或 yarn 安装依赖时，每个项目都会有自己的 node_modules。如果多个项目都安装了同一个依赖，可能会重复占用很多空间。

pnpm 会把依赖统一存储到全局仓库中，然后通过链接的方式放到项目里。

简单理解：

• npm/yarn：每个项目都复制一份依赖。
• pnpm：依赖集中存储，项目里通过链接使用。

pnpm 常用命令：

pnpm install
pnpm add axios
pnpm remove axios
pnpm dev
pnpm build

5. npm、yarn、pnpm 的区别

工具	特点	适合场景
npm	Node.js 自带，最通用	普通项目、初学者
yarn	安装稳定，生态成熟	老项目、团队已有规范
pnpm	速度快，节省空间，依赖严格	现代项目、中大型项目

实际开发中，三者通常选一个即可，不建议在同一个项目里混用。

判断项目使用哪个包管理器，可以看锁文件：

锁文件	包管理器
package-lock.json	npm
yarn.lock	yarn
pnpm-lock.yaml	pnpm

三、package.json 是什么？

几乎所有现代前端项目里都有一个 package.json 文件。

它是项目的配置说明书。

一个简单的 package.json 可能长这样：

{
  "name": "my-vite-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.0",
    "axios": "^1.0.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

重点看几个字段。

1. scripts

scripts 用来定义项目脚本。

比如：

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

当我们执行：

npm run dev

本质上就是执行：

vite

当我们执行：

npm run build

本质上就是执行：

vite build

如果是 pnpm，则可以写：

pnpm dev
pnpm build

如果是 yarn，则可以写：

yarn dev
yarn build

2. dependencies

dependencies 表示项目运行时需要的依赖。

比如：

"dependencies": {
  "vue": "^3.0.0",
  "axios": "^1.0.0"
}

这些依赖通常会被打包进最终项目中。

3. devDependencies

devDependencies 表示开发阶段需要的依赖。

比如：

"devDependencies": {
  "vite": "^5.0.0",
  "typescript": "^5.0.0"
}

这些依赖主要用于开发、构建、测试，不一定会进入最终线上代码。

四、Vite 和 Webpack 是什么？

Vite 和 Webpack 都是前端构建工具。

它们主要负责：

• 启动本地开发服务器
• 处理模块导入
• 编译 Vue、React、TypeScript
• 处理 CSS、Less、Sass
• 处理图片、字体等静态资源
• 代码压缩
• 打包生成上线文件

也就是说，我们写的源代码通常不能直接上线，需要经过构建工具处理。

例如我们写：

import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";

createApp(App).mount("#app");

浏览器最终拿到的可能已经是被打包、压缩、拆分后的文件。

五、Webpack 是什么？

Webpack 是一个非常经典的前端构建工具。

它的核心思想是：

一切资源都可以作为模块处理。

比如：

• JS 是模块
• CSS 是模块
• 图片是模块
• 字体是模块
• Vue 文件也是模块

Webpack 会从入口文件开始，分析所有依赖关系，然后把它们打包成浏览器可以运行的文件。

Webpack 的基本工作流程

简单来说：

1. 从入口文件开始，比如 src/main.js
2. 分析代码中的 import 和 require
3. 找到所有依赖模块
4. 使用 loader 处理不同类型的文件
5. 使用 plugin 执行额外功能
6. 输出最终打包文件

loader 是什么？

Webpack 本身主要认识 JavaScript 和 JSON。

如果要处理 CSS、图片、Vue、TypeScript 等文件，就需要 loader。

比如：

• css-loader：处理 CSS
• style-loader：把 CSS 插入页面
• babel-loader：转换 JavaScript
• ts-loader：处理 TypeScript
• vue-loader：处理 .vue 文件

plugin 是什么？

plugin 用来扩展 Webpack 的能力。

比如：

• 生成 HTML 文件
• 清理打包目录
• 提取 CSS 文件
• 压缩代码
• 定义环境变量

可以简单理解：

loader 负责处理文件，plugin 负责扩展构建流程。

六、Vite 是什么？

Vite 是一个现代前端构建工具，特点是开发启动快、热更新快、配置简单。

Vite 的核心设计是：

开发环境利用浏览器原生 ES Modules，生产环境使用 Rollup 打包。

1. 为什么 Vite 启动快？

传统 Webpack 开发服务器通常需要先把整个项目打包一遍，然后才能启动。

项目越大，启动越慢。

而 Vite 在开发环境中不会一开始就打包整个项目，而是直接启动服务器。

浏览器请求哪个模块，Vite 就处理哪个模块。

也就是说：

• Webpack：先整体打包，再启动。
• Vite：先启动服务，按需编译。

这就是 Vite 冷启动很快的主要原因。

2. 什么是 ES Modules？

ES Modules 是浏览器原生支持的模块系统。

比如：

import { add } from "./math.js";

console.log(add(1, 2));

现代浏览器可以直接识别这种 import 语法。

Vite 正是利用了浏览器原生 ESM 的能力，在开发环境中避免了全量打包。

3. Vite 的依赖预构建

虽然浏览器支持 ESM，但很多第三方包可能是 CommonJS 格式，或者内部模块非常多。

如果直接让浏览器加载，可能会产生大量请求，影响性能。

所以 Vite 会使用 esbuild 对依赖进行预构建。

esbuild 是用 Go 语言写的构建工具，速度非常快。

依赖预构建主要做两件事：

• 把 CommonJS 转成 ESM
• 把多个零散模块合并，减少浏览器请求数量

4. Vite 的热更新为什么快？

热更新也叫 HMR，全称 Hot Module Replacement。

当我们修改代码时，页面不需要完整刷新，只更新变化的模块。

Vite 的 HMR 很快，因为它基于 ESM 的模块关系，只需要更新受影响的模块，而不是重新打包整个项目。

七、Vite 和 Webpack 的区别

对比项	Vite	Webpack
开发启动	快，按需编译	相对慢，通常需要先打包
开发模式	基于浏览器原生 ESM	基于打包后的 bundle
热更新	快，模块级更新	项目变大后可能变慢
生产构建	默认使用 Rollup	使用 Webpack 自身
配置复杂度	相对简单	更灵活但更复杂
生态	现代框架支持好	生态成熟，历史项目多
适合场景	新项目、现代前端项目	复杂项目、老项目、深度定制项目

需要注意：

Vite 并不是完全替代 Webpack，Webpack 也不是过时工具。它们只是设计思路和适用场景不同。

Webpack 的优势是生态成熟、配置能力强，很多大型老项目仍然使用 Webpack。

Vite 的优势是开发体验更好，启动快，配置简单，非常适合现代前端项目。

八、它们之间到底是什么关系？

现在把 Node.js、npm/yarn/pnpm、Vite/Webpack 串起来。

一个现代前端项目通常是这样的：

Node.js
  ↓
提供本地运行环境

npm / yarn / pnpm
  ↓
安装依赖、执行脚本

Vite / Webpack
  ↓
启动开发服务器、处理源码、打包项目

浏览器
  ↓
运行最终生成的 HTML、CSS、JavaScript

举个例子。

我们创建一个 Vite 项目后，可能会执行：

pnpm install
pnpm dev
pnpm build

这几条命令背后的含义是：

1. pnpm install

安装项目依赖。

它会读取 package.json，然后把项目需要的依赖安装到本地。

比如：

• Vue
• React
• Vite
• TypeScript
• Axios

2. pnpm dev

启动开发服务器。

它会执行 package.json 中的脚本：

"dev": "vite"

也就是启动 Vite 开发服务器。

然后我们就可以在浏览器访问：

http://localhost:5173

3. pnpm build

构建生产环境代码。

它会执行：

"build": "vite build"

Vite 会把项目打包到 dist 目录中。

最终上线时，服务器部署的一般就是 dist 目录里的文件。

九、一个完整的前端项目运行流程

假设我们从 GitHub 下载了一个前端项目。

通常运行步骤是：

git clone 项目地址
cd 项目目录
pnpm install
pnpm dev

或者使用 npm：

npm install
npm run dev

这几个步骤可以这样理解：

1. 下载项目代码。
2. 进入项目目录。
3. 安装依赖。
4. 启动开发服务器。
5. 浏览器打开本地地址查看页面。

如果要打包上线：

pnpm build

或者：

npm run build

构建完成后，一般会生成：

dist/

这个目录就是生产环境需要部署的静态资源。

十、常见问题

1. Node.js 和浏览器里的 JavaScript 有什么区别？

它们使用的都是 JavaScript 语言，但运行环境不同。

浏览器提供 DOM、BOM 等能力。

Node.js 提供文件系统、网络、进程等能力。

所以：

• 浏览器 JS 主要操作页面。
• Node.js 主要用于服务端、本地工具、工程化脚本。

2. npm install 安装的东西在哪里？

一般在项目目录下的 node_modules 里。

同时依赖信息会记录在：

package.json

锁定版本的信息会记录在：

package-lock.json
yarn.lock
pnpm-lock.yaml

3. node_modules 可以删除吗？

可以。

如果依赖出问题，可以删除 node_modules 后重新安装。

例如：

pnpm install

或者：

npm install

不过不要手动修改 node_modules 里的源码，因为重新安装后改动会丢失。

4. 为什么不建议混用 npm、yarn、pnpm？

因为不同包管理器生成的锁文件不同，依赖解析方式也不同。

混用可能导致：

• 依赖版本不一致
• 本地能运行，别人不能运行
• CI/CD 构建失败
• 锁文件冲突

所以一个项目最好统一一种包管理器。

5. Vite 项目为什么也需要 npm 或 pnpm？

因为 Vite 本身也是一个 npm 包。

我们执行：

pnpm dev

本质上是通过 pnpm 去执行项目中安装的 Vite 命令。

所以关系是：

pnpm 负责执行命令
Vite 负责启动和构建项目
Node.js 负责提供运行环境

6. Vite 开发时不打包，那生产环境还打包吗？

会。

Vite 只是在开发环境中利用 ESM 避免全量打包。

生产环境依然需要打包，因为上线时要考虑：

• 文件压缩
• 代码分割
• Tree Shaking
• 浏览器缓存
• 静态资源优化
• 兼容性处理

Vite 生产构建默认使用 Rollup。

十一、面试中怎么回答？

如果面试官问：

1. 你了解 Node.js 吗？

可以这样回答：

Node.js 是 JavaScript 的运行环境，它基于 V8 引擎，让 JavaScript 可以运行在浏览器之外。前端工程化中，Node.js 主要用于执行构建工具、启动开发服务器、运行 npm 脚本和管理依赖。

2. npm、yarn、pnpm 有什么区别？

可以这样回答：

它们都是 JavaScript 包管理工具，都可以安装依赖和执行脚本。npm 是 Node.js 自带的工具，使用最广；yarn 解决了早期 npm 的一些性能和稳定性问题；pnpm 通过全局内容寻址存储和软链接机制来节省磁盘空间，并且依赖管理更严格。实际项目中一般根据团队规范选择一种，不建议混用。

3. Vite 和 Webpack 有什么区别？

可以这样回答：

Webpack 是传统的打包型构建工具，开发时通常需要先构建依赖图并打包后再启动服务。Vite 在开发环境中利用浏览器原生 ESM，实现按需编译，所以启动速度和热更新速度更快。生产环境下，Vite 默认使用 Rollup 打包。Webpack 的优势是生态成熟、配置能力强，Vite 的优势是开发体验好、配置简单，适合现代前端项目。

4. Vite 为什么快？

可以这样回答：

Vite 快主要有三个原因。第一，开发环境基于浏览器原生 ESM，不需要一开始全量打包。第二，第三方依赖会用 esbuild 进行预构建，esbuild 速度非常快。第三，HMR 是基于模块依赖关系的局部更新，修改文件后只更新相关模块，所以热更新速度很快。

十二、总结

本文介绍了 Node.js、npm/yarn/pnpm、Vite/Webpack 之间的关系。

简单总结：

• Node.js 是 JavaScript 的本地运行环境。
• npm、yarn、pnpm 是包管理工具，用来安装依赖和执行脚本。
• Webpack 是经典构建工具，生态成熟，配置能力强。
• Vite 是现代构建工具，开发启动快，热更新快，配置简单。
• 一个现代前端项目通常依赖 Node.js 环境，通过包管理器安装依赖，再通过 Vite 或 Webpack 启动和构建项目。

最后用一句话概括：

Node.js 提供环境，npm/yarn/pnpm 管理依赖，Vite/Webpack 负责构建，它们共同组成了现代前端工程化的基础。