第三章：npm — 看懂依赖从哪来

你已经敲过无数次 npm install 了，但你知道它到底装了什么、装到哪去了吗？这一章把 npm 彻底讲明白。

3.1 npm 是什么

先看名字：npm = Node Package Manager（Node 包管理器）。装 Node 的时候它就自动附赠了。

一句话理解：

npm 就是 JS 世界的”应用商店”。

全世界的开发者，把自己写好的、有用的代码打包（这个”包”英文叫 package）上传到 npm 上。你想用别人写好的功能，不用自己重写，一条命令就能下载安装。

比如：

• 想要日期处理？装 dayjs
• 想要网络请求？装 axios
• 想用 Vue？装 vue

npm install dayjs

敲完这条命令，dayjs 这个包就下载到你的项目里，可以直接用了。是不是很像在手机应用商店点”安装”？

3.2 package.json 逐行拆解

每个正规的前端项目，根目录都有一个 package.json 文件。它是整个项目的**“身份证 + 说明书”**。

打开一个典型的 package.json，长这样：

{
  "name": "my-demo",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

逐个字段看：

scripts：你敲的命令从哪来

你之所以能敲 npm run dev，就是因为 scripts 里定义了 "dev": "vite"。

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

• npm run dev → 实际执行 vite（启动开发服务器）
• npm run build → 实际执行 vite build（打包上线）

所以 npm run xxx 就是”运行 scripts 里名叫 xxx 的那条命令”。你也可以自己往里加。

dependencies vs devDependencies

这是新手最容易懵的点，用一个类比就懂了：

• dependencies（生产依赖）：像盖房子用的砖头水泥，房子盖好了它们还在里面。比如 vue、axios —— 用户访问网站时这些代码也在运行。
• devDependencies（开发依赖）：像盖房子用的脚手架和工具，房子盖好就拆掉了。比如 vite —— 只在你开发和打包时用，用户访问时用不到。

安装时用 -D 就是装成开发依赖：

npm install axios          # 装成 dependencies
npm install vite -D        # 装成 devDependencies

3.3 node_modules 和 package-lock.json

装完包后，项目里会多出两样东西。

node_modules 文件夹

这是真正下载下来的包代码存放的地方。它有个特点：巨大无比，动辄几百 MB、上万个文件。

关于它你只需记住三点：

1. 它是 npm install 自动生成的，不用手动管
2. 它不需要上传（提交代码时会被忽略，别人拿到你的项目 npm install 一下就能重新生成）
3. 删了也不怕，npm install 能重新装回来

package-lock.json 文件

package.json 里写的版本号常常带个 ^（比如 ^3.4.0），意思是”3.4.0 及以上的兼容版本都行”。这就有个问题：你今天装是 3.4.0，同事下周装可能变成 3.4.5，团队环境就不一致了。

package-lock.json 就是来锁定版本的：它精确记录了这次到底装了每个包的哪个版本。有了它，团队里每个人 npm install 装出来的东西分毫不差。

这个文件也不用手动改，但要跟着代码一起上传（和 node_modules 相反）。

3.4 常用命令

日常开发，记住这几条就够：

# 拿到一个新项目，按 package.json 把所有依赖装齐
npm install

# 装一个新的生产依赖
npm install axios

# 装一个新的开发依赖
npm install vite -D

# 卸载一个包
npm uninstall axios

# 运行 scripts 里定义的命令
npm run dev
npm run build

最常用的场景：从 GitHub 或同事那拿到一个项目，第一件事永远是 npm install，把依赖装齐，然后 npm run dev 跑起来。

3.5 npm / pnpm / yarn

你在别的项目里可能会看到 pnpm install、yarn 这样的命令。它们是什么？

它们都是和 npm 干一样活的替代品（包管理器）：

结论：了解即可，先用 npm。 三者命令高度相似，以后遇到 pnpm 项目，把 npm 换成 pnpm 基本就能用。

3.6 小结

• npm 是 JS 世界的”应用商店”，一条命令下载别人写好的包
• package.json 是项目的身份证 + 说明书：
  • scripts 定义了 npm run xxx 能跑的命令
  • dependencies（砖头水泥，上线也要）vs devDependencies（脚手架，开发才用）
• node_modules：下载的代码，巨大、不用管、不上传
• package-lock.json：锁定版本，要上传
• 拿到新项目：先 npm install，再 npm run dev
• pnpm / yarn 是同类替代品，先用 npm 就好

下一章，我们搞懂 .vue 文件里那句 import { ref } from 'vue' —— 现代前端的”拼装方式”：模块化。