包管理器

包管理器是前端开发中不可或缺的工具，用于管理项目依赖、脚本执行和版本控制。

npm

基础命令

bash

1# 初始化项目
2npm init
3npm init -y
4
5# 安装依赖
6npm install lodash
7npm install lodash --save
8npm install lodash --save-dev
9
10# 全局安装
11npm install -g create-react-app
12
13# 卸载依赖
14npm uninstall lodash
15
16# 更新依赖
17npm update lodash
18
19# 查看依赖
20npm list
21npm list --depth=0

package.json配置

json

1{
2  "name": "my-project",
3  "version": "1.0.0",
4  "description": "A sample project",
5  "main": "index.js",
6  "scripts": {
7    "start": "node index.js",
8    "dev": "nodemon index.js",
9    "build": "webpack --mode production",
10    "test": "jest",
11    "lint": "eslint src/**/*.js"
12  },
13  "dependencies": {
14    "react": "^18.2.0",
15    "react-dom": "^18.2.0"
16  },
17  "devDependencies": {
18    "webpack": "^5.88.0",
19    "jest": "^29.5.0"
20  },
21  "peerDependencies": {
22    "react": ">=16.8.0"
23  },
24  "engines": {
25    "node": ">=14.0.0",
26    "npm": ">=6.0.0"
27  }
28}

脚本管理

json

1{
2  "scripts": {
3    "prebuild": "echo 'Preparing build...'",
4    "build": "webpack --mode production",
5    "postbuild": "echo 'Build completed!'",
6    "dev": "concurrently \"npm run server\" \"npm run client\"",
7    "server": "nodemon server.js",
8    "client": "webpack serve --mode development"
9  }
10}

Yarn

安装和基础命令

bash

1# 安装Yarn
2npm install -g yarn
3
4# 初始化项目
5yarn init
6yarn init -y
7
8# 安装依赖
9yarn add lodash
10yarn add lodash --dev
11yarn add lodash --peer
12
13# 全局安装
14yarn global add create-react-app
15
16# 卸载依赖
17yarn remove lodash
18
19# 更新依赖
20yarn upgrade lodash
21
22# 查看依赖
23yarn list
24yarn list --depth=0

yarn.lock文件

yaml

1# yarn.lock
2lodash@^4.17.21:
3  version "4.17.21"
4  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz"
5  integrity sha512-AyFvJfG4U9vE1AkJ0gQMC3Ec3nJXpGI6A3L1jyLWyNgqxcwot6AO/PF7A0vyxQ/ghjF49StH+CLiHjDicJ2ScQ==

工作区配置

json

1// package.json
2{
3  "name": "monorepo",
4  "private": true,
5  "workspaces": [
6    "packages/*",
7    "apps/*"
8  ],
9  "scripts": {
10    "build": "yarn workspaces run build",
11    "test": "yarn workspaces run test"
12  }
13}

pnpm

安装和基础命令

bash

1# 安装pnpm
2npm install -g pnpm
3
4# 初始化项目
5pnpm init
6
7# 安装依赖
8pnpm add lodash
9pnpm add -D webpack
10pnpm add -O react
11
12# 全局安装
13pnpm add -g create-react-app
14
15# 卸载依赖
16pnpm remove lodash
17
18# 更新依赖
19pnpm update lodash
20
21# 查看依赖
22pnpm list

pnpm-workspace.yaml

yaml

1# pnpm-workspace.yaml
2packages:
3  - 'packages/*'
4  - 'apps/*'
5  - '!**/test/**'

依赖管理

json

1{
2  "dependencies": {
3    "react": "^18.2.0"
4  },
5  "devDependencies": {
6    "webpack": "^5.88.0"
7  },
8  "peerDependencies": {
9    "react": ">=16.8.0"
10  },
11  "optionalDependencies": {
12    "fsevents": "^2.3.2"
13  }
14}

包管理器对比

性能对比

特性	npm	Yarn	pnpm
安装速度	慢	快	最快
磁盘空间	高	中等	低
缓存机制	基础	好	优秀
并行安装	不支持	支持	支持
确定性	不确定	确定	确定

功能对比

功能	npm	Yarn	pnpm
工作区	支持	支持	支持
零安装	不支持	支持	支持
离线模式	基础	好	优秀
安全审计	支持	支持	支持

最佳实践

依赖管理

json

1{
2  "dependencies": {
3    "react": "^18.2.0",
4    "react-dom": "^18.2.0"
5  },
6  "devDependencies": {
7    "webpack": "^5.88.0",
8    "jest": "^29.5.0",
9    "eslint": "^8.45.0"
10  },
11  "peerDependencies": {
12    "react": ">=16.8.0"
13  },
14  "resolutions": {
15    "react": "^18.2.0"
16  }
17}

脚本优化

json

1{
2  "scripts": {
3    "preinstall": "node scripts/check-node-version.js",
4    "postinstall": "node scripts/setup-hooks.js",
5    "build": "webpack --mode production",
6    "build:dev": "webpack --mode development",
7    "test": "jest --coverage",
8    "test:watch": "jest --watch",
9    "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
10    "lint:fix": "eslint src/**/*.{js,jsx,ts,tsx} --fix",
11    "type-check": "tsc --noEmit"
12  }
13}

安全配置

json

1{
2  "engines": {
3    "node": ">=14.0.0",
4    "npm": ">=6.0.0"
5  },
6  "os": ["darwin", "linux", "win32"],
7  "cpu": ["x64", "arm64"],
8  "overrides": {
9    "vulnerable-package": "1.2.3"
10  }
11}

版本管理

语义化版本

bash

1# 主版本号.次版本号.修订号
2# 1.2.3
3
4# 安装特定版本
5npm install lodash@4.17.21
6npm install lodash@^4.17.21
7npm install lodash@~4.17.21
8npm install lodash@latest
9npm install lodash@next

版本范围

json

1{
2  "dependencies": {
3    "lodash": "^4.17.21",    // 兼容版本
4    "react": "~18.2.0",       // 补丁版本
5    "webpack": "5.88.0",      // 精确版本
6    "typescript": ">=4.0.0",  // 最低版本
7    "jest": "*"               // 任意版本
8  }
9}

私有包管理

npm私有包

bash

1# 发布私有包
2npm publish --access private
3
4# 安装私有包
5npm install @myorg/package-name

Yarn私有包

bash

1# 配置私有仓库
2yarn config set registry https://registry.yarnpkg.com
3yarn config set @myorg:registry https://npm.myorg.com
4
5# 发布私有包
6yarn publish --access private

pnpm私有包

bash

1# 配置私有仓库
2pnpm config set @myorg:registry https://npm.myorg.com
3
4# 发布私有包
5pnpm publish --access private

依赖锁定

package-lock.json

json

1{
2  "name": "my-project",
3  "version": "1.0.0",
4  "lockfileVersion": 2,
5  "dependencies": {
6    "lodash": {
7      "version": "4.17.21",
8      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
9      "integrity": "sha512-AyFvJfG4U9vE1AkJ0gQMC3Ec3nJXpGI6A3L1jyLWyNgqxcwot6AO/PF7A0vyxQ/ghjF49StH+CLiHjDicJ2ScQ=="
10    }
11  }
12}

锁定文件管理

bash

1# 更新锁定文件
2npm install
3yarn install
4pnpm install
5
6# 强制重新安装
7npm ci
8yarn install --frozen-lockfile
9pnpm install --frozen-lockfile

性能优化

缓存配置

bash

1# npm缓存
2npm cache clean --force
3npm cache verify
4
5# Yarn缓存
6yarn cache clean
7yarn cache list
8
9# pnpm缓存
10pnpm store prune
11pnpm store status

镜像配置

bash

1# 配置淘宝镜像
2npm config set registry https://registry.npmmirror.com
3yarn config set registry https://registry.npmmirror.com
4pnpm config set registry https://registry.npmmirror.com

npm​

基础命令​

package.json配置​

脚本管理​

Yarn​

安装和基础命令​

yarn.lock文件​

工作区配置​

pnpm​

安装和基础命令​

pnpm-workspace.yaml​

依赖管理​

包管理器对比​

性能对比​

功能对比​

最佳实践​

依赖管理​

脚本优化​

安全配置​

版本管理​

语义化版本​

版本范围​

私有包管理​

npm私有包​

Yarn私有包​

pnpm私有包​

依赖锁定​

package-lock.json​

锁定文件管理​

性能优化​

缓存配置​

镜像配置​

参与讨论

npm

基础命令

package.json配置

脚本管理

Yarn

安装和基础命令

yarn.lock文件

工作区配置

pnpm

安装和基础命令

pnpm-workspace.yaml

依赖管理

包管理器对比

性能对比

功能对比

最佳实践

依赖管理

脚本优化

安全配置

版本管理

语义化版本

版本范围

私有包管理

npm私有包

Yarn私有包

pnpm私有包

依赖锁定

package-lock.json

锁定文件管理

性能优化

缓存配置

镜像配置