包管理 & 依赖
🎯 学完这课你能
- 理解 package.json 是什么、怎么读
- 区分 dependencies 和 devDependencies
- 知道 npm install 出错时怎么排查
你做绩效系统时,有没有注意到 node_modules 文件夹里有几千个文件夹?你可能想:"我就做了一个小系统,怎么需要这么多东西?"
因为现代软件开发不是从零开始造一切。你的项目依赖了很多别人写好的工具——就像公司不会自己造办公桌、电脑、空调,而是从外面采购。
package.json = 项目的人员编制表 + 预算表
npm / yarn / pnpm = 采购部(负责下单和到货检查)
node_modules = 外包团队的工位区(它们实际坐的地方)
依赖(dependency) = 你需要的外包服务
读懂 package.json
打开你绩效项目的 package.json,它大概长这样:
= 正式员工。项目上线后还需要的。没有它们,系统跑不起来。
= 实习生 / 临时工。只在开发时需要(代码检查、测试工具等),上线后不需要。
版本号的秘密
你注意到版本号前面有个 ^ 符号吗?版本号遵循 semver(语义化版本) 规则:
^16.0.0 = 接受 16.x.x 的任何版本(允许小更新和补丁)
~16.0.0 = 只接受 16.0.x(只允许补丁更新)
16.0.0 = 锁死这个版本,不允许任何更新
版本号 = 合同条款
- Major 升级 = 签了全新的外包合同(可能需要大量对接调整)
- Minor 升级 = 外包团队增加了新服务(不影响已有合作)
- Patch 升级 = 外包团队修复了之前的工作失误(必须接受的修补)
npm 常见命令
npm install(或 npm i)
根据 package.json 采购所有外包团队。克隆项目后第一件事就是跑这个。
npm install axios
新采购一个叫 axios 的工具(用来发 HTTP 请求)。会自动加到 package.json。
npm run dev
执行 scripts 里定义的 "dev" 命令。通常是启动本地开发服务器。
npm run build
编译打包——把源代码变成可以上线的产物。就像把手稿排版印刷成书。
为什么 npm install 会出错?
这可能是你最常遇到的问题之一。常见原因:
A 工具要求用 React 18,B 工具要求 React 19——就像两个外包团队要求不同版本的办公软件,装不到一起。
有些包要求特定版本的 Node.js(运行环境)。就像某些软件只能在 Mac 上跑。
npm 从国外服务器下载,有时候网不好。可以配置国内镜像(淘宝镜像)。
"npm install 报错了,错误信息是 [复制关键行]。我的 Node.js 版本是 [node -v 的结果]。"
lock 文件:精确到每一个人
你可能见过 package-lock.json(或 yarn.lock / pnpm-lock.yaml)——这个文件动辄几千行,看起来吓人。
其实它的作用很简单:
package.json 说:"我需要一个前端框架,React 19.x 都行"
package-lock.json 说:"就用 React 19.0.4,它依赖的 scheduler 用 0.25.0"
编制表 vs 入职花名册:
- package.json = "需要 3 个前端工程师"(编制要求)
- lock 文件 = "张三、李四、王五,工号 001/002/003"(精确到人)
这样保证你和 CC 用的是完全相同的版本,避免"在我电脑上能跑"的尴尬。
📝 小测验
你刚从 GitHub 克隆了一个项目,第一步应该做什么?
📝 小测验 2
devDependencies 和 dependencies 的区别是?