npm、yarn、cnpm、pnpm 使用操作都在这了

有时候想查个命令,或者换个镜像找了几篇文章才找到,最近闲着没事干,干脆整理一篇文档,以后就不用在网上瞎搜有的还写不全。

Usage

全局安装

// 安装node自带npm,检查是否安装成功,执行如下命令
npm -v  // 6.14.15

// yarn
npm install -g yarn

// cnpm 
npm install -g cnpm

// pnpm
npm install -g pnpm
复制代码

初始化一个项目

npm init
// OR
yarn init

// 快速生成的package.json默认配置
npm/yarn init -y
复制代码

安装项目依赖

// npm / cnpm / pnpm
// 简写,全称 npm install
npm i [package]

// yarn
yarn add [package]

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

// 小栗子
// 安装 jquery
npm i jquery@3.0.0

// 查看package.json 
"jquery": "^3.0.0"
复制代码

Tips1 意外情况

我们经常会在安装一半退出在继续安装会报错,这是因为有缓存的原因。

npm cache clean --force
复制代码

Tips2 –save–dev意思

npm install vue
npm install vue --save
npm install @babel/core --save-dev

空
查看package.json,文件内容不发生改变,在运行项目且有引用该依赖时能正常运行,当npm i时候,不会安装该依赖。

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

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

Tips3 ^和~的区别

// package.json中^和~的区别

"vue": "~2.6.0",
"es6-promise": "^2.0.0"

~符号
假设vue版本已经更新到2.7.0以上,当我们重新安装项目依赖,只会匹配到2.6.x的最新版本,不会匹配到2.7.0及以上

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

Tips4 版本号代表含义

"vue": "2.6.0"

第一位表示:主版本号,常用于大版本更新,可能不兼容旧版本。
如Vue2.0和Vue3.0,虽然说向下兼容,但是部分语法存在兼容问题。

第二位表示:次版本号,增加了新的功能,基本向下兼容。

第三位表示:补丁号, 修复了bug等。
复制代码

全局包管理

// 查看当前哪些包需要更新
npm outdated -g --depth=0

@vue/cli    4.5.9   4.5.13  4.5.13  global
npm       6.14.15  6.14.15  7.24.0  global
pnpm       5.17.3  5.18.10  6.15.1  global

// 更新全局的依赖包
npm update -g

// 更新依赖包
npm update pnpm

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

1. 卸载 pnpm
npm uninstall -g pnpm

清理 npm 缓存
npm cache clean --force

重新安装
npm i pnpm -g

// 第二种 强制安装依赖
npm install -g pnpm --force 
复制代码

升级依赖包

"vue": "^2.6.0"

npm update vue

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

// "vue": "^2.6.14"
复制代码

删除依赖包

"vue": "^2.6.0"

npm uninstall vue

yarn remove vue
复制代码

更新项目中所有依赖项

  • npm-check
  • npm-check-updates

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

npm-check-updates

安装

npm install -g npm-check-updates
复制代码

使用

// 查看可更新包
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

安装

npm install npm-check -g
复制代码

使用

// 查看可更新包
npm-check
 
// 升级所有依赖项
npm-check -u
复制代码

切换国内镜像

目前常用的镜像列表

  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/  
复制代码

查看yarn当前镜像源

yarn config get registry

npm config get registry

cnpm config get registry

pnpm config get registry

//https://registry.nlark.com/
复制代码

设置镜像源

// 全局使用
yarn config set registry https://registry.npm.taobao.org

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

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

还原镜像源

npm config set registry https://registry.npmjs.org
// 根据上面的镜像列表替换就行。
复制代码

nrm / yrm 管理镜像源工具

yrm/nrm 不仅可以快速切换镜像源,还可以测试自己网络访问不同源的速度,且yrm/nrm用法都相同。

安装 yrm /nrm

npm install -g yrm
// or
npm install -g nrm
复制代码

列出当前镜像源列表

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
复制代码

使用,测试

yrm use taobao
// https://registry.npm.taobao.org/

yrm test taobao
// taobao - 187ms
复制代码

建议

Windows用户

推荐使用yarn/npm,可能cnpm/pnpm安装速度优于yarn/npm,但是可能造成诡异的 bug,比如项目运行不起来等等,最简单直接的方法就是删除node_modules重新安装。

如图所示,图中的项目通过pnpm/cnpm安装的依赖项,
直接运行不起来,之所以只针对Win系统,因为Win系统删除node_modules快则几分钟,慢则十几分钟,而mac直接秒删,试错成本低可以尝试。

Q: 项目通过cnpm/pnpm 安装依赖怎么知道会不会有诡异的 bug。

A: 项目如果能运行起来,99%不会有诡异的 bug,万一调试中报错,写的代码有没有问题,可以查看报错日志自行查看一下相关教程。

大家好,我是星野。欢迎加我微信qqlcx55,或者关注我的公众号前端有道 点击可以扫码,学习交流。

参考文献

免责声明:务必仔细阅读

  • 本站为个人博客,博客所转载的一切破解、path、补丁、注册机和注册信息及软件等资源文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。

  • 本站为非盈利性站点,打赏作为用户喜欢本站捐赠打赏功能,本站不贩卖软件等资源,所有内容不作为商业行为。

  • 本博客的文章中涉及的任何解锁和解密分析脚本,仅用于测试和学习研究,禁止用于商业用途,不能保证其合法性,准确性,完整性和有效性,请根据情况自行判断.

  • 本博客的任何内容,未经许可禁止任何公众号、自媒体进行任何形式的转载、发布。

  • 博客对任何脚本资源教程问题概不负责,包括但不限于由任何脚本资源教程错误导致的任何损失或损害.

  • 间接使用相关资源或者参照文章的任何用户,包括但不限于建立VPS或在某些行为违反国家/地区法律或相关法规的情况下进行传播, 博客对于由此引起的任何隐私泄漏或其他后果概不负责.

  • 请勿将博客的任何内容用于商业或非法目的,否则后果自负.

  • 如果任何单位或个人认为该博客的任何内容可能涉嫌侵犯其权利,则应及时通知并提供身份证明,所有权证明至admin@proyy.com.我们将在收到认证文件后删除相关内容.

  • 任何以任何方式查看此博客的任何内容的人或直接或间接使用该博客的任何内容的使用者都应仔细阅读此声明。博客保留随时更改或补充此免责声明的权利。一旦使用并复制了博客的任何内容,则视为您已接受此免责声明.

您必须在下载后的24小时内从计算机或手机中完全删除以上内容.

您使用或者复制了本博客的任何内容,则视为已接受此声明,请仔细阅读


更多福利请关注一一网络微信公众号或者小程序

一一网络微信公众号
打个小广告,宝塔服务器面板,我用的也是,很方便,重点是免费的也能用,没钱太难了,穷鬼一个,一键全能部署及管理,送你3188元礼包,点我领取https://www.bt.cn/?invite_code=MV9kY3ZwbXo=


一一网络 » npm、yarn、cnpm、pnpm 使用操作都在这了

发表评论

发表评论

一一网络-提供最优质的文章集合

立即查看 了解详情