发布于 

包管理操作笔记

安装项目依赖

npm / cnpm / pnpm

1
2
3
4
5
6
7
8
9
10
npm install [package]
// 简写
npm i [package]

// 安装指定版本
npm i[package]@[version]
npm i [package]@[tag]

// 全局安装依赖
npm i -g [package]

yarn

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 安装
yarn add [package]

// 全局安装依赖
yarn global add [package]

// 安装全部依赖
yanr
// or
yarn install

// 安装指定版本
yarn add [package]@[version]
yarn add [package]@[tag]


安装失败场景

可能安装依赖卡断,或者中断安装依赖,后面再重新安装,会提示报错这是因为有缓存的原因

方式一

删除 node_modules 包重新安装。

方式二

删除缓存

1
npm cache clean --force

–save–dev作用

在安装我们依赖的时候,经常会看到后缀 --save--save--dev,入行那会什么都不懂照着写去,能用就行,结果开发好好的,线上就是不行。

1
2
3
npm install vue --no-save
npm install vue --save
npm install @babel/core --save-dev

--no-save 查看 package.json,文件内容不发生改变,在运行项目时能正常运行,当 npm i 时候,不会安装该依赖,提示安装该依赖。

--save 查看 package.json 会有一个 dependencies 对象,里面就是项目运行需要的依赖。 dependencies 代表项目运行所依赖的模块 简写 -S

1
2
// 示例
npm install express -S

--save-dev 查看 package.json 会有一个 devDependencies 对象,里面就是项目开发时候需要的依赖。 devDependencies 代表项目开发所需要的模块 如:babel 是发布时,将 ES6 代码编译成 ES5 ,那么 babel 就是 devDependencies。 简写 -D

^ 和 ~ 的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
// package.json中^和~的区别

"dependencies": {
"vue": "~2.5.0",
"es6-promise": "^2.0.0"
},

// ~符号
// 假设Vue后面更新新的版本,已经到2.6.0或者3.2.0以上
// 当我们重新安装项目依赖,只会匹配到2.5.x的最新版本,不会安装到2.6.0及以上

// ^符号
// 假设es6-promise更新3.0.0,当我们重新安装项目依赖,es6-promise始终是2.0.0

管理全局包

查看 npm 全局安装过的包

1
npm list -g --depth=0

查看全局包哪些需要更新

1
npm outdated -g --depth=0

更新全局的依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
npm update -g

// 更新指定依赖
npm i [package]

// 可能报错 Remove the existing file and try again,
or run npm with --force to overwrite files recklessly.

// 卸载依赖
npm uninstall -g [package]

// 清理 npm 缓存
npm cache clean --force

// 重新安装
npm i -g [package]

// 第二种 强制安装
npm install -g [package] --force
// 也适用于yarn

查看 yarn 全局安装过的包

1
yarn global list --depth=0

更新全局的依赖

1
2
3
4
5
yarn global upgrade

// 更新指定依赖
yarn global add <package>@lates
yarn global add yrm@lates

升级依赖项

npm / yarn 查看 项目 中包是否更新

1
yarn outdated
1
2
3
4
5
6
7
8
9
10
11
12
13
14
"dependencies": {
"vue": "~2.6.0"
},

npm update vue
// 不会更新package.json文件
npm i vue // 重新安装,会更新最新版本

yarn upgrade vue@2.6.14 指定版本
yarn upgrade vue@^ //选择指定版本

"dependencies": {
"vue": "^2.6.14"
}

删除依赖包

1
2
3
4
5
6
7
8
9
10
11
"dependencies": {
"vue": "^2.6.14"
}

npm uninstall vue

yarn remove vue

// 删除全局依赖
npm uninstall -g <package>
yarn global remove <package>

更新项目中所有依赖项

  • npm-check
  • npm-check-updates

二者目的相同,只是在更新过程中的一些交互展示形式存在一定的差异

npm-check-updates

安装

1
npm install -g npm-check-updates

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 查看可更新包
ncu

[====================] 12/12 100%
@vssue/api-github-v4 ^1.4.0 → ^1.4.7
@vssue/vuepress-plugin-vssue ^1.4.6 → ^1.4.8
@vuepress-reco/vuepress-plugin-back-to-top ^1.5.7 → ^1.6.0
@vuepress/plugin-google-analytics ^1.8.1 → ^1.8.2
@vuepress/plugin-pwa ^1.8.1 → ^1.8.2
dayjs ^1.10.4 → ^1.10.7
vuepress ^1.8.1 → ^1.8.2
vuepress-plugin-live2d-model ^1.0.0 → ^1.0.7
vuepress-plugin-one-click-copy ^1.0.2 → ^1.0.6

// 升级所有依赖项
ncu -u
ncu -u vuepress dayjs ...

npm-check

安装

1
2
npm install npm-check -g
复制代码

使用

1
2
3
4
5
// 查看可更新包
npm-check

// 升级所有依赖项
npm-check -u

切换国内镜像

目前常用的镜像列表

1
2
3
4
5
npm ---- https://registry.npmjs.org/
cnpm --- https://registry.nlark.com/
taobao - https://registry.npm.taobao.org
yarn --- https://registry.yarnpkg.com/
tencent- https://mirrors.cloud.tencent.com/npm/

查看当前镜像源

1
2
3
4
5
6
7
8
9
yarn config get registry

npm config get registry

cnpm config get registry

pnpm config get registry

// https://registry.nlark.com/

设置镜像源

1
2
3
4
5
6
7
8
// 全局使用
yarn config set registry https://registry.npm.taobao.org

npm config set registry https://registry.nlark.com/
// ...

// 临时在项目中使用
npm install --registry https://registry.npm.taobao.org

还原镜像源

1
2
npm config set registry https://registry.npmjs.org
// 根据上面的镜像列表替换就行

nrm / yrm 管理镜像源工具

1
2
3
npm install -g yrm
// or
npm install -g nrm

列出当前镜像源列表

1
2
3
4
5
6
7
8
9
yrm ls

npm ----- https://registry.npmjs.org/
cnpm ---- http://r.cnpmjs.org/
taobao -- https://registry.npm.taobao.org/
nj ------ https://registry.nodejitsu.com/
rednpm -- http://registry.mirror.cqupt.edu.cn
skimdb -- https://skimdb.npmjs.com/registry
yarn ---- https://registry.yarnpkg.com

测试

1
2
3
4
5
yrm use taobao
// https://registry.npm.taobao.org/

yrm test taobao
// taobao - 187ms