一、NPM是什么？

NPM 是 Node.js 的包管理工具，用来安装、管理、分享 JavaScript 代码包。

三个核心组成部分：

组成部分	作用	类比
NPM官网	包的"应用商店"，全球最大的代码仓库	App Store
NPM命令行工具	安装/卸载/发布包的命令	应用商店的下载按钮
package.json	项目的"说明书"，记录所有依赖	购物清单

简单说：你需要某个功能（比如日期格式化），不用自己写，去 NPM 官网找一个包，用命令行安装，然后在代码里require或import就能用了。

二、package.json

package.json是项目的身份证和说明书

2.1 创建package.json

# 交互式创建（会问你一堆问题）
npm init

# 快速创建（全部默认）
npm init -y

2.2 核心字段详解

{
  "name": "my-project",           // 项目名称
  "version": "1.0.0",              // 版本号（语义化版本）
  "description": "我的项目描述",    // 项目描述
  "main": "index.js",              // 入口文件（CommonJS）
  "module": "index.mjs",           // 入口文件（ES Module）
  "type": "module",                // 使用ES Module（可选）
  
  "scripts": {
    "dev": "vite",                 // 开发命令
    "build": "vite build",         // 构建命令
    "start": "node server.js"      // 启动命令
  },
  
  "dependencies": {
    "vue": "^3.4.0",               // 生产环境依赖
    "axios": "^1.6.0"
  },
  
  "devDependencies": {
    "vite": "^5.0.0",              // 开发环境依赖
    "eslint": "^8.0.0"
  },
  
  "peerDependencies": {
    "react": "^18.0.0"             // 需要宿主项目提供的依赖
  },
  
  "bin": {
    "my-cli": "./bin/cli.js"       // 命令行工具入口
  }
}

2.3 dependencies vs devDependencies

dependencies（生产依赖）

{
  "dependencies": {
    "vue": "^3.4.0",      // 项目运行时需要
    "axios": "^1.6.0"     // 发请求需要
  }
}

特点：

项目运行时必须有的包
打包后会被包含在最终代码里
部署到服务器时需要安装

工程化场景：Vue/React 框架、UI 组件库、路由、状态管理

devDependencies（开发依赖）

{
  "devDependencies": {
    "vite": "^5.0.0",     // 开发时用的构建工具
    "eslint": "^8.0.0",   // 代码检查工具
    "prettier": "^3.0.0"  // 代码格式化工具
  }
}

特点：

只在开发阶段需要
打包后不会包含在最终代码里
项目运行时不需要

工程化场景：构建工具、代码检查、测试框架、TypeScript 编译器

区分原则

项目上线后还需要它吗？

需要 → dependencies

不需要 → devDependencies

# 安装到 dependencies
npm install lodash --save
# 或简写
npm install lodash

# 安装到 devDependencies
npm install vite --save-dev
# 或简写
npm install vite -D

2.4 语义化版本

版本号格式：主版本号.次版本号.补丁版本号

^3.4.0  →  兼容的更新（自动安装最新的次版本和补丁版本）
~3.4.0  →  补丁更新（只自动安装最新的补丁版本）
3.4.0   →  精确版本
*       →  任意版本（不推荐）

版本更新类型	版本号变化	场景
补丁（Patch）	3.4.0 → 3.4.1	Bug修复，不影响功能
次版本（Minor）	3.4.0 → 3.5.0	新增功能，向后兼容
主版本（Major）	3.4.0 → 4.0.0	破坏性更新，不向后兼容

工程化最佳实践：

使用 ^ 获取兼容更新
锁定 package-lock.json 确保版本一致
升级主版本前先看更新日志

三、常用NPM命令

3.1 安装包

# 安装所有依赖（根据package.json）
npm install
# 简写
npm i

# 安装指定包
npm install lodash
npm i lodash

# 安装到 devDependencies
npm install vite -D

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

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

# 从国内镜像安装（加速）
npm install --registry=https://registry.npmmirror.com

3.2 卸载包

npm uninstall lodash
npm uninstall lodash -D
npm uninstall -g npx

3.3 更新包

# 检查哪些包需要更新
npm outdated

# 更新所有包（按版本规则）
npm update

# 更新指定包
npm update lodash

# 全局更新
npm update -g

3.4 查看信息

# 查看已安装的包
npm list
npm list --depth=0  # 只显示顶层依赖

# 查看包的信息
npm info lodash

# 查看包的版本历史
npm view lodash versions

3.5 清理

# 删除node_modules和package-lock.json（重新安装用）
rm -rf node_modules package-lock.json
npm install

四、scripts

scripts是前端工程化的操作面板，所有构建命令都通过它执行。

4.1 配置 scripts

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext .js,.vue",
    "format": "prettier --write src/**/*.js",
    "test": "vitest",
    "prepare": "husky install"
  }
}

4.2 运行 scripts

# 运行 dev 脚本
npm run dev

# 运行 build 脚本
npm run build

# 多个脚本组合
npm run lint && npm run build

4.3 特殊钩子（pre/post）

{
  "scripts": {
    "prebuild": "npm run lint",    // build前自动执行
    "build": "vite build",
    "postbuild": "npm run preview" // build后自动执行
  }
}

npm run build
# 执行顺序：prebuild → build → postbuild

4.4 npx（临时执行）

# npx会临时安装包并执行，执行完自动删除
npx create-vite my-app
npx prettier --write src/

# 与 npm run 的区别：
# npm run 执行的是 package.json 里 scripts 中定义的命令
# npx 执行的是 node_modules/.bin/ 里的任何命令，或临时下载执行

五、package-lock.json（锁定文件）

作用：锁定所有依赖的精确版本，确保团队所有成员、服务器安装的是完全一样的版本。

{
  "name": "my-project",
  "lockfileVersion": 3,
  "packages": {
    "node_modules/vue": {
      "version": "3.4.15",        // 精确版本
      "resolved": "https://...",  // 下载地址
      "integrity": "sha512-...",  // 文件校验
      "dependencies": { ... }     // 子依赖
    }
  }
}

最佳实践：

✅ 一定要提交到Git仓库
✅ 用npm ci代替npm install（CI环境用，更快更严格）
❌ 不要手动修改这个文件

六、安装包的位置和原理

6.1 安装位置

# 项目安装（当前目录）
npm install lodash
# 安装到：./node_modules/lodash

# 全局安装（所有项目共享）
npm install -g create-vite
# 安装到：/usr/local/lib/node_modules/create-vite

6.2 node_modules的依赖树

node_modules/
├── lodash/
├── vue/
├── axios/
└── vite/
    ├── node_modules/
    │   ├── esbuild/      # vite的子依赖
    │   └── rollup/       # vite的子依赖
    └── ...

注意：依赖嵌套层级可能很深，这就是为什么node_modules经常很大。

六、NPM相关配置

6.1 镜像加速（国内必备）

# 设置淘宝镜像
npm config set registry https://registry.npmmirror.com

# 查看当前镜像
npm config get registry

# 临时使用
npm install --registry=https://registry.npmmirror.com

6.2 版本管理

// package.json 中的版本号
{
  "dependencies": {
    "vue": "^3.4.0",        // ✅ 好：获得兼容更新
    "react": "18.2.0",      // ❌ 不好：锁定太死
    "axios": "*"            // ❌ 不好：太危险
  }
}

6.3 清理依赖

# 定期清理没用的包
npm prune

# 检查哪些包可以更新
npm outdated

# 安全漏洞检查
npm audit
npm audit fix  # 自动修复漏洞

6.4 CI/CD中的使用

# CI环境用 ci（更快更严格）
npm ci          # 必须存在 package-lock.json
npm run build

6.5 发布自己的包

# 1. 登录NPM
npm login

# 2. 检查package.json
# name、version必须正确

# 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