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

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12


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

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 vueyarn upgrade vue@2.6.14 指定版本
yarn upgrade vue@^ //选择指定版本// "vue": "^2.6.14"

删除依赖包

"vue": "^2.6.0"npm uninstall vueyarn 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 -uncu -u vuepress dayjs ...
fe2e03c84d5f8980238f02161d3c45f5.png

npm-check

安装

npm install npm-check -g

使用

// 查看可更新包
npm-check// 升级所有依赖项
npm-check -u
f7159385d27bfe15b62429c73222fec2.png

切换国内镜像

目前常用的镜像列表

npm ---- https://registry.npmjs.org/cnpm --- https://registry.nlark.com/taobao - https://registry.npm.taobao.orgyarn --- https://registry.yarnpkg.com/tencent- https://mirrors.cloud.tencent.com/npm/

查看yarn当前镜像源

yarn config get registrynpm config get registrycnpm config get registrypnpm config get registry//https://registry.nlark.com/

设置镜像源

// 全局使用
yarn config set registry https://registry.npm.taobao.orgcnpm 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 lsnpm -----  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直接秒删,试错成本低可以尝试。

7b16f035348674c8dcb10e5e3426888d.png

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

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

参考文献

  • https://blog.csdn.net/xuaner8786/article/details/81630445

  • https://juejin.cn/post/6844904114762022926

  • https://www.npmjs.com/package/npm-check-updates

  • https://juejin.cn/post/6913833065647341581

  • https://github.com/dylang/npm-check

最近组建了一个江西人的前端交流群,如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。

推荐阅读

1个月,200+人,一起读了4周源码
我历时3年才写了10余篇源码文章,但收获了100w+阅读

老姚浅谈:怎么学JavaScript?

我在阿里招前端,该怎么帮你(可进面试群)

145b37375e21619e7ed687d459afb6ac.gif

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,最近组织了源码共读活动

eea8b286fe78d95deed27ce579110cea.png

识别方二维码加我微信、拉你进源码共读

今日话题

略。欢迎分享、收藏、点赞、在看我的公众号文章~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275257.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每次启动项目的服务,电脑竟然乖乖的帮我打开了浏览器,100行源码揭秘!

1. 前言大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行三个月了,大家一起交流学习,共同进步。想学源码,极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、…

初级爬虫师_初级设计师的4条视觉原则

初级爬虫师重点 (Top highlight)Like many UXers, I got into the industry from a non-visual background (in my case it was Business and later on Human Cognition). Even though I found great benefits coming from those backgrounds, it also meant I had no UI/Visua…

开源监控解决方案OpenFalcon系列(一)

OpenFalcon是由小米的运维团队开源的一款企业级、高可用、可扩展的开源监控解决方案,,在众多开源爱好者的支持下,功能越来越丰富,文档更加的完善,OpenFalcon 已经成为国内最流行的监控系统之一。小米、美团、金山云、快…

如何利用 webpack 在项目中做出亮点

大家好,我是若川。最近这几年,在前端代码打包器领域内,webpack 算得上是时下最流行的前端打包工具。它可以分析各个模块的依赖关系,最终打包成我们常见的静态文件:.js 、 .css 、 .jpg 、.png,极大地提升了…

Github 王炸功能!Copilot 替代打工人编程?

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行三个月了,大家一起交流学习,共同进步。大家好,我是皮汤。最近组里在讨论一个有意思的工具 Github Copilot&#xff…

ux和ui_糟糕的UI与UX番茄酱模因

ux和uiAt face value, this meme appears to be a quick and easy tool for educating the general public about what the differences are between UI and UX. You might look at the attractive glass bottle labeled “UI” and understand that UI might have to do more …

Linux中的wheel用户组是什么?

在Linux中wheel组就类似于一个管理员的组。 通常在Linux下,即使我们有系统管理员root的权限,也不推荐用root用户登录。一般情况下用普通用户登录就可以了,在需要root权限执行一些操作时,再su登录成为root用户。但是,任…

ElementUI 组件库 md-loader 的解析和优化

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行三个月了,大家一起交流学习,共同进步。背景相信很多同学在学习 webpack 的时候,对 loader 的概念应该有所了解&…

csdn 用户 蚂蚁翘大象_用户界面设计师房间里的大象

csdn 用户 蚂蚁翘大象Once upon a time, an educated eye detected a new trend in UI designs, particularly, in Dribbble. It was a conceptual proposition, not an actual design for a customer or an app. Trying to explain the characteristics of this new trend, a …

面试官问发布订阅模式是在问什么?

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行了三个多月,大家一起交流学习,共同进步。本文来自 simonezhou 小姐姐投稿的第八期笔记。面试官常问发布订阅、观察者模式&#…

figma下载_不用担心Figma中的间距

figma下载重点 (Top highlight)I spend way too much time caring about spacing when designing interfaces and building design systems. You are probably no stranger to the constant 1 px and 8 px nudging, continuous checking of the bottom or in-between space for…

【建议收藏】面试官贼喜欢问的 32+ vue 修饰符,你掌握几种啦?

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行了三个多月,大家一起交流学习,共同进步。前言vue简洁好用体现在很多个地方,比如其内置了32修饰符,可以很…

知识管理系统Data Solution研发日记之一 场景设计与需求列出

在平时开发的过程中,经常会查找一些资料,从网上下载一些网页,压缩格式文件到自己的电脑中,然后阅读。程序有别于其他行业的一个特征是,所有的资料,数据,压缩文件,只用于产生可以工作…

shields 徽标_我们如何准确地记住著名徽标的特征和颜色?

shields 徽标The logos of global corporations like Apple, Starbucks, Adidas, and IKEA are designed to create instant brand associations in the minds of billions who see them every day. But how accurately can we remember the features and colors of these famo…

面了三次字节,他的一些感悟

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行了三个多月,大家一起交流学习,共同进步。今天分享一篇小K投稿的字节面试记录,这是他第三次面字节了,之前…

解决Wireshark安装Npcap组件失败

2019独角兽企业重金招聘Python工程师标准>>> 解决Wireshark安装Npcap组件失败 从Wireshark 3.0开始,Npcap取代Winpcap组件,成为Wireshark默认的网卡核心驱动。由于该组件属于驱动程序,所以安装时候容易被杀毒/防火墙软件拦截&…

adobe清理工具_Adobe终于通过其新的渐变工具实现了这一点-UX评论

adobe清理工具的Photoshop (Photoshop) UX:用户体验: At first glance, the UX looks okay; it’s pretty clear. The user gets to know how to use this tool right away. The color palette is located above, and the gradient down below. The diamond betwee…

新手向:前端程序员必学基本技能——调试JS代码

1前言大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行三个月了,大家一起交流学习,共同进步。想学源码,极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、un…

iOS开发ApplePay的介绍与实现

1、Apple Pay的介绍 Apple Pay官方1.1 Apple Pay概念 Apple Pay,简单来说, 就是一种移动支付方式。通过Touch ID/ Passcode,用户可使用存储在iPhone 6, 6p等之后的新设备上的信用卡和借记卡支付证书来授权支付; 它是苹果公司在2014苹果秋季新…

mes建设指南_给予和接受建设性批评的设计师指南

mes建设指南Constructive criticism, or more plainly, feedback, plays a crucial role in a designer’s job. Design is an iterative process, so we are often either asking for feedback on our own work or dishing it out to a fellow designer.建设性的批评&#xff…