技术笔记

外观

前端包管理与常用命令

约 1322 字大约 4 分钟

2025-06-19

前端开发中常用的包管理工具包括 npm、yarn、pnpm，构建工具包括 Vite。本文整理这些工具的常用命令、版本语义及最佳实践。

npm（Node Package Manager）

npm 是 Node.js 默认的包管理工具，用于安装、管理和发布 JavaScript 包。

常用命令

初始化项目

npm init
# 一路默认选项
npm init -y

创建 package.json 文件，记录项目的依赖和配置。

安装与卸载

# 安装生产依赖（默认行为，等价于 --save）
npm install <package-name>

# 安装开发依赖
npm install <package-name> --save-dev
# 简写形式
npm i <package-name> -D

# 全局安装
npm install <package-name> -g

# 卸载
npm uninstall <package-name>
缩写含义
-S / --save保存到 dependencies
-D / --save-dev保存到 devDependencies
-G / -g / --global全局安装

更新与清理

# 更新单个包
npm update <package-name>

# 更新所有包
npm update

# 检查过期包
npm outdated

# 清理缓存
npm cache clean --force

# 全新安装（删除 node_modules 后重新安装，适合 CI/CD）
npm ci

运行脚本

npm run <script-name>

运行 package.json 中定义的脚本，例如：

{
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "lint": "eslint ."
  }
}

查看依赖树

# 查看已安装的包及版本
npm ls
npm list

# 查看全局安装的包
npm ls -g

镜像源配置

# 查看所有配置
npm config ls -l

# 设置淘宝镜像（国内推荐）
npm config set registry https://registry.npmmirror.com/

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

Node.js 版本管理

使用 n 管理 Node.js 版本：

# 安装 n
npm install -g n

# 清除 npm 缓存（可选）
npm cache clean -f

# 升级到最新稳定版
n stable

# 升级到最新版
n latest

# 安装指定版本
n 18.17.0

版本语义说明

npm 遵循 SemVer（语义化版本） 规范：

字段说明
major主版本号：不兼容的 API 变更
minor次版本号：向下兼容的功能新增
patch修订号：向下兼容的问题修正
prerelease预发布版本，如 1.0.0-alpha.1

版本范围符号

符号示例范围说明
（无）1.0.0=1.0.0精确锁定 1.0.0 版本
^^1.2.3>=1.2.3 <2.0.0允许更新到下一个不兼容的主版本（兼容主版本内的所有改动）
^^0.2.3>=0.2.3 <0.3.0主版本为 0 时，^ 行为与 ~ 相同
~~1.2.3>=1.2.3 <1.3.0允许更新到下一个不兼容的次版本
~~1.2>=1.2.0 <1.3.0省略修订号
**>=0.0.0匹配任何版本
>=>=2.1.0>=2.1.0大于等于
<=<=2.0.0<=2.0.0小于等于
-1.2.3 - 2.3.4>=1.2.3 <=2.3.4范围区间

最佳实践：生产环境推荐使用 ^ 以自动获取安全修复，关键依赖可锁定精确版本。

使用场景

  • 管理项目依赖
  • 运行构建、测试、启动等脚本
  • 发布自己的包到 npm 仓库

优缺点

  • 优点：
    • 生态丰富，几乎所有 JavaScript 库都支持 npm
    • 简单易用，社区支持强大
  • 缺点：
    • 依赖安装速度较慢（尤其是嵌套依赖）
    • 依赖管理可能不够严格，容易出现版本冲突

Vite

Vite 是一个现代化的前端构建工具，专注于开发环境的快速启动和生产环境的高效构建。

常用命令

# 创建项目
npm create vite@latest

# 启动开发服务器（支持 HMR 热更新）
npm run dev

# 构建生产环境代码
npm run build

# 预览生产构建结果
npm run preview

常用配置参数

# 指定端口
vite --port 3000

# 使用自定义配置文件
vite --config my-config.2.js

# 指定模式
vite --mode production

使用场景

  • 快速启动开发环境，适合现代前端框架（Vue、React、Svelte 等）
  • 构建高性能的生产环境代码

优缺点

  • 优点：
    • 开发环境启动速度快（基于原生 ES 模块）
    • 支持热更新（HMR），开发体验好
    • 生产环境构建优化（基于 Rollup）
  • 缺点：
    • 对旧版浏览器的支持需要额外配置（如 polyfill）
    • 生态相对较新，部分插件可能不够成熟

其他包管理工具

npx

npx 是 npm 5.2.0 引入的工具，用于临时安装并运行包，无需全局安装。

# 运行本地或远程包
npx <package-name>

# 示例
npx create-react-app my-app
npx vite@latest my-project

Yarn

Yarn 是 Facebook 推出的包管理工具，具有更快的安装速度和更好的依赖管理。

# 初始化项目
yarn init

# 安装包
yarn add <package-name>        # 生产依赖
yarn add <package-name> -D     # 开发依赖
yarn add <package-name> -G     # 全局安装

# 运行脚本
yarn <script-name>

# 安装所有依赖
yarn install

pnpm

pnpm 是一个高效的包管理工具，通过硬链接和符号链接减少磁盘空间占用。

# 安装包
pnpm add <package-name>        # 生产依赖
pnpm add <package-name> -D     # 开发依赖

# 安装所有依赖
pnpm install

总结

工具定位特点
npm包管理最常用，生态最丰富
yarn包管理速度快，依赖锁定更严格
pnpm包管理磁盘占用小，安装速度快
Vite构建工具开发环境极速启动，生产环境基于 Rollup 打包
npx包执行临时运行包，无需全局安装

💡 选型建议：日常开发三者任选其一即可，推荐新项目使用 pnpm 或 yarn，构建工具推荐 Vite。