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，一经查实，立即删除！

相关文章

CAN控制器的选择

CAN控制器的选择

在进行CAN总线开发前，首先要选择好CAN总线控制器。下面就比较一些控制器的特点。 一些主要的CAN总线器件产品 制造商 产品型号 器件功能及特点 Intel 82526 82527 8XC196CA/CB CAN通信控制器，符合CAN2.0A CAN通信控制器，符合CAN2.0B 扩展…
阅读更多...
洛谷 4115 Qtree4——链分治

洛谷 4115 Qtree4——链分治

题目：https://www.luogu.org/problemnew/show/P4115 论文：https://wenku.baidu.com/view/1bc2e4ea172ded630b1cb602.html 重链剖分，分别用线段树维护每条重链。线段树叶子的信息是该点轻孩子的信息；线段树区间的信息是考虑重链的一…
阅读更多...
每次启动项目的服务，电脑竟然乖乖的帮我打开了浏览器，100行源码揭秘！

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

1. 前言大家好，我是若川。最近组织了源码共读活动，感兴趣的可以加我微信 ruochuan12 参与，已进行三个月了，大家一起交流学习，共同进步。想学源码，极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、…
阅读更多...
初级爬虫师_初级设计师的4条视觉原则

初级爬虫师_初级设计师的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…
阅读更多...
String类中IndexOf与SubString

String类中IndexOf与SubString

IndexOfpublic: int IndexOf( String^ value, int startIndex, int count ) 说明： value类型：System..::.String要查找的 String。 startIndex类型：System..::.Int32搜索起始位置。 count类型：System..::.Int32要检查的字符位置…
阅读更多...
开源监控解决方案OpenFalcon系列(一)

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

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

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

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

[转]上下拉电阻

上下拉电阻有什么用？ 对这个问题，平时没有留意过，搞设计的时候都是照本宣科，没有真正弄懂意思． 很多单片机开发的入门者，以及一些从事软件开发的人，往往在开发单片机的时候遇到上拉电阻、下拉…
阅读更多...
yum安装Mariadb,二进制安装Mariadb

yum安装Mariadb,二进制安装Mariadb

yum安装Mariadb 设置Mariadb的yum源 vim /etc/yum.repos.d/mariadb.repo [mariadb] namemariadb baseurlhttps://mirrors.tuna.tsinghua.edu.cn/mariadb/yum/10.2/centos7-amd64/ gpgcheck0 使用清华yum源安装Mariadb,可以选择不同的版本，此处安装10.2.23 yum in…
阅读更多...
Oracle中的wmsys.wm_concat

Oracle中的wmsys.wm_concat

Oracle中的wmsys.wm_concat主要实现行转列功能(说白了就是将查询的某一列值使用逗号进行隔开拼接，成为一条数据)。 wmsys.wm_concat除了单独使用外还可以和over函数结合使用。 开始看看具体使用方法： select t.rank, t.Name from t_menu_item t; rank…
阅读更多...
Github 王炸功能！Copilot 替代打工人编程？

Github 王炸功能！Copilot 替代打工人编程？

大家好，我是若川。最近组织了源码共读活动，感兴趣的可以加我微信 ruochuan12 参与，已进行三个月了，大家一起交流学习，共同进步。大家好，我是皮汤。最近组里在讨论一个有意思的工具 Github Copilot&#xff…
阅读更多...
ux和ui_糟糕的UI与UX番茄酱模因

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中wheel组就类似于一个管理员的组。 通常在Linux下，即使我们有系统管理员root的权限，也不推荐用root用户登录。一般情况下用普通用户登录就可以了，在需要root权限执行一些操作时，再su登录成为root用户。但是，任…
阅读更多...
ElementUI 组件库 md-loader 的解析和优化

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

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

一个html5流星雨源码

流星会随着鼠标的方向划过&#xff0c;按紧鼠标左键可以增长流星的尾巴。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang"zh-CN"> <head> <title>流星雨<…
阅读更多...
csdn 用户 蚂蚁翘大象_用户界面设计师房间里的大象

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 …
阅读更多...
面试官问发布订阅模式是在问什么？

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

大家好&#xff0c;我是若川。最近组织了源码共读活动&#xff0c;感兴趣的可以加我微信 ruochuan12 参与&#xff0c;已进行了三个多月&#xff0c;大家一起交流学习&#xff0c;共同进步。本文来自 simonezhou 小姐姐投稿的第八期笔记。面试官常问发布订阅、观察者模式&#…
阅读更多...
linux服务器内存、根目录使用率、某进程的监控告警脚本

linux服务器内存、根目录使用率、某进程的监控告警脚本

脚本内容如下 #!/bin/bash#磁盘超过百分之80发送邮件告警DISK_USEDdf -T |sed -n "2p" |awk {print ($4/$3)*100}DISK_percentage80if [ expr "$DISK_USED > $DISK_percentage" ]thenecho "$HOSTNAME服务器当前硬盘使用率为$DISK_USED%" | ma…
阅读更多...
figma下载_不用担心Figma中的间距

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 修饰符，你掌握几种啦？

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

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

Copyright @ 2022~2023