02. Node.js 与包管理

课时信息

📅 时间：8:50 - 9:35 🎯 目标：全平台配置 Node.js 开发环境，掌握 npm/pnpm 包管理与国内源配置

1. 为什么需要 Node.js?

Node.js 不仅是 JS 运行时，更是现代前端工程化（Vite, Next.js, Vue, React）的基石。 没有 Node.js，就没有现代 Web 开发。

2. 安装 Node.js (版本管理方案)

避免直接安装官网安装包

❌ 强烈不推荐 直接去 Node.js 官网下载 .pkg 或 .exe 安装。 ✅ 强烈推荐 使用版本管理器（fnm/nvm），因为开发中经常需要在不同项目间切换 Node 版本。

Mac / Linux (推荐 fnm 或 nvm)

方案 A: fnm (极速 - 推荐)

Rust 编写，比 nvm 快，且跨平台支持好。

安装 fnm:

curl -fsSL https://fnm.vercel.app/install | bash
# 如果网络卡顿，尝试使用代理或 nvm 方案

（后续配置参考终端提示）

方案 B: nvm (经典)

老牌管理器，资料多，但启动稍慢。

使用 GitHub 加速镜像安装:

curl -o- https://ghfast.top/https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

配置环境变量: 如果安装后 nvm 命令找不到，需将以下内容写入 ~/.zshrc 或 ~/.bashrc:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

常用命令:

nvm install --lts  # 安装最新长期支持版
nvm use --lts      # 使用该版本

Windows (推荐 fnm 或 nvm-windows)

方案 A: fnm (PowerShell) - 推荐

需要先安装 Winget 或 Chocolatey，或者直接下载 exe。

# 使用 Winget 安装
winget install Schniz.fnm

# 配置 PowerShell Profile
notepad $PROFILE
# 在打开的文件末尾添加:
fnm env --use-on-cd | Out-String | Invoke-Expression

方案 B: nvm-windows (传统)

1. 下载 nvm-setup.exe 并安装。
2. 打开 CMD 或 PowerShell:

   nvm install lts
   nvm use lts

---

3. 必做的国内源配置 (各平台通用)

由于 npm 官方源在国外，下载速度慢且不稳定，必须配置 淘宝镜像 (npmmirror)。

方式一：使用 nrm (推荐，方便切换)

# 1. 指定镜像源极速安装 nrm
npm install -g nrm --registry=https://registry.npmmirror.com

# 2. 查看所有源
nrm ls

# 3. 切换到淘宝源
nrm use taobao

# 验证
npm config get registry
# 应输出: https://registry.npmmirror.com/

方式二：直接命令设置

npm config set registry https://registry.npmmirror.com/

---

4. 包管理器：pnpm (取代 npm)

pnpm 是目前最先进的包管理器，速度快、磁盘占用小（使用硬链接共享依赖），且解决了“幽灵依赖”问题。

# 全局安装 pnpm (Mac/Linux/Windows)
npm install -g pnpm

# 验证
pnpm -v

pnpm 设置国内源

pnpm 也会读取 .npmrc，但为了保险，可以单独设一次：

pnpm config set registry https://registry.npmmirror.com/

---

5. 核心命令速查表

操作	npm 命令	pnpm 命令 (推荐)	说明
安装依赖	npm install	pnpm install (或 pnpm i)	下载 package.json 中的所有包
添加包	npm install axios	pnpm add axios	安装并写入 dependents
开发环境包	npm i -D vite	pnpm add -D vite	写入 devDependencies
全局安装	npm i -g pnpm	pnpm add -g pnpm	装到系统目录 (慎用，除工具外)
运行脚本	npm run dev	pnpm dev	运行 scripts 中的命令
移除包	npm uninstall axios	pnpm remove axios	删除依赖

6. 项目中常见文件解析

• package.json: 项目的“身份证”，记录了项目名、脚本和依赖列表。
• package-lock.json / pnpm-lock.yaml: 锁定文件。

  • 千万不要删除！

    也不要手动修改它。它保证了大家电脑上安装的包版本完全一致。一定要提交到 Git！

• node_modules: 存放所有依赖包的黑洞文件夹。永远加入 .gitignore，不要提交！