npm

这一课你将能做到

1. 用 npm 安装、卸载、更新第三方包
2. 理解 package.json、package-lock.json 的作用
3. 发布自己的 npm 包

为什么要学

现代前端/Node.js 开发离不开第三方库。React、Express、Lodash 这些都是通过 npm 安装的。npm 是 Node.js 的包管理器，也是全球最大的软件仓库（超过 200 万个包）。

人话：npm 是「应用商店」，你需要的工具都能在这里找到。

先建立图像

你的项目
  ├── node_modules/          # 第三方包安装目录
  ├── package.json           # 项目配置 + 依赖清单
  ├── package-lock.json      # 锁定版本，确保团队一致
  └── index.js               # 你的代码，require('xxx')

跟着做

步骤 1：初始化项目

# 创建项目目录
mkdir myapp
cd myapp

# 初始化 package.json（交互式）
npm init

# 一键初始化（全部默认）
npm init -y

生成的 package.json：

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

步骤 2：安装依赖

# 安装生产依赖（dependencies）
npm install express
npm install express lodash axios    # 一次装多个

# 安装开发依赖（devDependencies）
npm install --save-dev jest
npm install -D jest                 # 简写

# 安装指定版本
npm install lodash@4.17.20

# 安装最新版本
npm install lodash@latest

# 全局安装（命令行工具）
npm install -g nodemon
npm install -g pm2

步骤 3：package.json 详解

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "My awesome app",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "jest",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "express": "^4.18.2",
    "lodash": "~4.17.21"
  },
  "devDependencies": {
    "jest": "^29.0.0",
    "nodemon": "^2.0.20"
  },
  "engines": {
    "node": ">=16.0.0"
  }
}

步骤 4：版本号语义（Semver）

版本号格式：主版本.次版本.修订号
例如：4.17.21

主版本（Major）：不兼容的 API 变更
次版本（Minor）：向下兼容的新功能
修订号（Patch）：向下兼容的 bug 修复

符号：
^4.18.2   兼容 4.x.x 最新版（4.18.2 到 <5.0.0）
~4.17.21  兼容 4.17.x 最新版（4.17.21 到 <4.18.0）
4.17.21   精确匹配 4.17.21
*         最新版（不推荐）

步骤 5：常用命令

# 查看已安装包
npm list                          # 本地包
npm list -g --depth=0             # 全局包

# 查看包信息
npm info lodash                   # 查看 lodash 信息
npm info lodash versions          # 查看所有版本

# 更新包
npm update                        # 更新所有
npm update lodash                 # 更新指定包
npm outdated                      # 查看过时的包

# 卸载
npm uninstall lodash
npm uninstall -g nodemon

# 清除缓存
npm cache clean --force

# 运行脚本
npm run dev                       # 运行 scripts.dev
npm test                          # 运行 scripts.test
npm start                         # 运行 scripts.start

步骤 6：package-lock.json 的作用

package.json:
  "express": "^4.18.2"     # 允许 4.18.2 到 <5.0.0

团队 A 安装时：express@4.18.2
团队 B 安装时：express@4.18.5（新发布了）
结果：版本不一致，可能出现兼容问题

package-lock.json 锁定确切版本：
  "express": {
    "version": "4.18.2",
    "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
    "integrity": "sha512-..."
  }

团队 A 和 B 都安装 4.18.2，确保一致。

重要：package-lock.json 必须提交到 Git。

步骤 7：npx 直接运行包

# 以前要全局安装
npm install -g create-react-app
create-react-app myapp

# 现在用 npx，不用全局安装
npx create-react-app myapp

# 运行项目依赖的命令
npx jest                          # 运行本地安装的 jest

步骤 8：发布自己的包

# 1. 注册 npm 账号
npm adduser

# 2. 登录
npm login

# 3. 发布
npm publish

# 4. 更新版本
npm version patch                 # 1.0.0 → 1.0.1
npm version minor                 # 1.0.0 → 1.1.0
npm version major                 # 1.0.0 → 2.0.0
npm publish

# 5. 撤销发布（72小时内）
npm unpublish myapp --force

实用配置

.npmrc 配置

# 使用淘宝镜像（国内加速）
npm config set registry https://registry.npmmirror.com

# 恢复官方源
npm config set registry https://registry.npmjs.org

# 查看配置
npm config list

scripts 高级用法

{
  "scripts": {
    "dev": "nodemon index.js",
    "build": "webpack --mode production",
    "test": "jest --coverage",
    "lint": "eslint src/",
    "format": "prettier --write src/",
    "prepare": "husky install",
    "prepublishOnly": "npm run build"
  }
}

讲清楚要点

1. dependencies vs devDependencies：生产环境用前者，开发工具用后者。
2. package-lock.json 锁定版本：确保团队和部署环境版本一致。
3. ^ 和 ~ 的区别：^ 允许次版本更新，~ 只允许修订号更新。
4. npx 不用全局安装：直接运行包，避免全局污染。
5. scripts 自动化：npm run xxx 执行自定义命令。

你可能会懵的地方

• npm 和 yarn 选哪个？ npm 是官方，yarn 更快、更稳定。现在 npm 7+ 已经追上来了，用哪个都行。

• node_modules 为什么这么大？ 依赖的依赖的依赖... 层层嵌套。别提交到 Git，用 .gitignore 忽略。

• 删除 node_modules 后如何恢复？ npm install 根据 package.json 和 package-lock.json 重新安装。

• 如何查看包的依赖关系？ npm list --depth=0 看顶层依赖，npm list --all 看完整树。

• npm audit 是什么？ 检查依赖包的安全漏洞。npm audit fix 自动修复。

错法对照

错法	问题	正解
提交 node_modules	仓库巨大	加 .gitignore
不提交 package-lock.json	团队版本不一致	必须提交
全局安装所有包	污染环境，权限问题	只全局安装命令行工具
用 * 版本号	不可控，可能装到不兼容版本	用 ^ 或 ~
修改 package.json 不运行 npm install	依赖未安装	修改后运行 npm install

卡点急救

1. 安装失败 EACCES 权限不足：不要用 sudo npm install，配置 npm 使用用户目录：npm config set prefix ~/.npm-global
2. 网络超时：切换淘宝镜像 npm config set registry https://registry.npmmirror.com
3. 版本冲突：删除 node_modules 和 package-lock.json，重新 npm install

面试常问

• npm install 和 npm ci 区别？ npm install 根据 package.json 安装，可能更新 package-lock.json；npm ci 严格根据 package-lock.json 安装，用于 CI/CD。

• dependencies 和 devDependencies 区别？ 前者生产环境需要（express），后者只在开发时需要（jest）。npm install --production 只装 dependencies。

• 如何解决依赖冲突？ npm 7+ 自动处理，或手动指定版本，或用 overrides 字段强制指定。

• npm 包的入口文件如何确定？ package.json 的 main 字段指定，默认 index.js。

自测三问

1. ^4.18.2 和 ~4.17.21 的区别？
2. 为什么要提交 package-lock.json？
3. 如何发布一个 npm 包？

小结一句话

npm 是 Node.js 的包管理器，用 package.json 管理依赖，package-lock.json 锁定版本，scripts 自动化任务。

延伸

• npm 官方文档
• 下一课：Tailwind CSS 快速开发 UI。