首页 前端知识 使用nvm安装的npm去全局安装pnpm和yarn的过程,并且让它们安装的包可以成功生效

使用nvm安装的npm去全局安装pnpm和yarn的过程,并且让它们安装的包可以成功生效

2024-05-20 15:05:24 前端知识 前端哥 706 610 我要收藏

注意:这篇文章文字较多,有不理解的先往下看,大部分文字只是为了让读者理解原理,不需要完全读懂依然可以实现安装(斜字体可忽略)

前情提要:最近发现npm特别不太好用,下载个包卡个半天,即使我设置了淘宝源。于是我想使用更快的包管理器,如pnpm和yarn,至于它们的优点这里就不多说了

如何安装的问题(可略过)

但是我这边面临了一个问题,全局安装pnpm和yarn的方式有两种

1. 找到安装包安装
2. 使用npm安装

首先若是我使用npm安装pnpm或者yarn,会遇到一个问题,因为我一直使用的是nvm安装的node(关于怎么安装nvm可以看我另一篇博客),只要切换node,那么作为npm包管理器下的pnpm指令会失效。除非我重新在切换的node上又全局安装一遍pnpm。那么pnpm全局安装的包会和npm全局安装的包是否会有冲突,我还不清楚
所以我打算先试试安装包安装
不出意外的话,还是出了意外,首先pnpm官网推荐的安装方式就是用npm安装,至于yarn倒是有安装包,结果使用yarn安装以后,用它全局安装的包的指令根本不生效,说是文件目录不合法,于是我和chatgtp捣鼓了一晚上,最终还是徒劳无功
所以没办法,还是选择用npm安装吧,那么我得解开一些疑惑

1. npm安装的包,和yarn,pnpm安装的包,到底会不会冲突
答案是不会:因为他们安装的包在不同的node_modules下面
2. 那么它们全局安装的包的指令会不会冲突呢,比如都下载了gulp
答案是不会:根据chatgtp描述,系统只会选择其中一个,这个是根据它们各自的bin目录在环境变量的顺序了决定的

ok步入正题

安装过程

1.全局安装pnpm

npm  i -g  pnpm

结果遇到一个问题,安装的pnpm需要版本大于16.14.0的node才能使用

好呗,那就安装

nvm install	16.14.0
nvm use 16.14.0
npm  i -g  pnpm

结果发现npm用不了,什么原因呢
我的nvm版本是1.1.7的。对高版本node不兼容,如果你是最新版的那不影响

于是去https://github.com/coreybutler/nvm-windows/releases下载最新版本的nvm(目前是1.1.12)

找到nvm-setup.exe 进行下载,然后安装
安装的文件位置就在你老版本的安装位置即可

这里的话,不用担心你安装新版本的nvm后会删除你老版本的nvm下载的node,因为它会自动继承
于是当我安装好nvm,心情愉悦的执行下面(毕竟我也担心过更新nvm版本对原先我下载的node也影响)

nvm install	16.14.0
npm  i -g  pnpm
pnpm -v

结果发现找不到pnpm指令,这可麻了

经过一阵排查发现是环境变量的问题
环境变量在哪里看(图就不放了,嫌麻烦):

1.点击 此电脑(我的电脑)  
2.鼠标右键  
3.点击属性进入设置面板 
4.搜索框搜索 编辑系统环境变量 
5.点击环境变量
6.系统变量中找到path点击查看

在系统环境变量中,我原先设置的存放指令的文件夹的环境变量变成了这样
注意:这里不理解的可以看我的那篇关于安装nvm的文章,如果你想知道你的npm存放指令的文件夹是什么,可以在命令行输入 npm -g bin

在这里插入图片描述
好好好,你小子跟我玩阴的是吧
于是我赶紧把它改回

D:\nvm\nodejs\node_modules\node_global

注意:当你用npm安装某个带指令的包(有些包不带指令哦)后,执行[name] -v ,如gulp -v,发现找不到指令,那么就是存放gulp.cmd的bin文件夹没有设置到环境变量中,如上,可以用 npm get prefix 或者 npm -g bin查看

2.设置pnpm的环境变量

为找到pnpm存放bin的目录,可以输入以下指令

pnpm -g bin

我的是C:\Users\86153\AppData\Local\pnpm
然后把它添加到系统环境变量的path中
在这里插入图片描述
再执行
注意:power shell 需要重新打开,才能对环境变量生效

pnpm  i -g gulp
gulp -v

就可以看到gulp的版本了,如果此时你的npm也全局安装gulp,那么你可以先将npm安装的gulp给卸载(npm uni -g gulp),再执行 gulp -v 以确定gulp真的是pnpm安装的那个

注意:pnpm是在npm的包管理下(即pnpm.cmd是在对应版本的node的目录下面),所以当你切换node版本的时候(node的目录换成了另一个版本的目录), 就不能使用pnpm了,你可以重新全局安装一个pnpm在你切换的node中 。 不过pnpm全局安装的包的指令并不受影响,即使你切换了node,依然可以执行gulp -v 这是因为gulp.cmd并不在node的目录下,如我的,是在C:\Users\86153\AppData\Local\pnpm目录下

至于node目录切换的原理,依然可以看我的关于安装nvm的博客

不过如果即使pnpm安装的gulp的指令真的在node的目录下,我们也可以解决这个问题
接下来,我会在讲解安装yarn的过程给出解决方案

3.全局安装yarn过程

上面提到,我使用安装包安装yarn遇到了一个问题,用yarn全局安装的包的指令不生效

鉴于我们已经安装pnpm了,这里我建议使用pnpm全局安装yarn
至于理由,当你看懂上一步中红色字体部分,你应该能理解
不理解,我这里再讲一遍

如果你用npm全局安装yarn的话,那么会遇到和pnpm相同的问题
那记就是,切换node后,你需要重新全局安装一个yarn

而使用pnpm安装yarn的话,yarn.cmd是在pnpm的bin文件夹下面,并不在node的目录下
因此不会受到node切换的影响,而是真正的全局安装
如我用pnpm安装yarn,是在C:\Users\86153\AppData\Local\pnpm里面

ps:有人可能会问:你说bin文件夹,你这个路径中没有bin啊,你小子是不是耍我。
这里我得说一下,一般安装的某些带指令的包,指令基本都是在文件名为bin的文件夹内
我这里说bin文件夹,代指存放指令的文夹

3.1全局安装yarn

ok,那么我们选择使用pnpm安装

pnpm i -g yarn 

安装完成后,按照惯例我们要设置环境变量了
不过还记得我上面提到上面问题(关于全局安装的pnpm会受node切换的影响)的解决方案吗

首先明确一点,pnpm是npm安装的,nvm下的npm受node(node和npm是绑定关系)版本切换的影响,每个版本的npm有自己的全局包,所以pnpm是注定受node的版本影响的,除非你使用的不是用nvm安装的node,而是单独安装的node
但yarn可以不受影响,因为yarn是pnpm安装的,pnpm存放指令的文件,我们是可以对它进行设置,即通过以下指令

(如果pnpm的bin文件夹不在node目录下,你就不需要设置了)

pnpm config set prefix ’文件路径’

例 pnpm config set prefix 'C:\Users\86153\AppData\Local\pnpm'

注意:该指令是将bin和node_modules都设置到对应路径下,yarn的方式和npm的有区别

接下来yarn是怎么处理的

3.2创建两个文件夹

如下,我在D:\yarn下面创建了两个文件夹yarn_cacheyarn_global
前者存放缓存文件,后者存放node_modulesbin

在这里插入图片描述

3.3对yarn全局安装相关的位置进行设置

输入以下命令,将yarn存放缓存的文件夹设置为
上面创建的文件夹

yarn config set cache-folder "D:\yarn\yarn_cache"

输入以下命令,将yarn存放bin的文件夹设置为
上面创建的文件夹

yarn config set prefix "D:\yarn\yarn_global"
yarn global bin   --获取yarn存放bin的文件夹位置

输入以下命令,将yarn存放node_modules的文件夹设置为
上面创建的文件夹

yarn config set global-folder "D:\yarn\yarn_global"

可以在用户文件(我的用户文件路径是C:\Users\86153)中的.yarnrc查看配置,或者不通过指令,直接修改该文件也是可以的,推荐还是指令修改,不容易出错
这样就完成,接着我们可以设置环境变量了

3.3设置pnpm的环境变量

按照前面给出的查看环境变量的方式
对系统环境变量的path进行编辑

如图:把yarn存放bin的文件夹的路径添加上去
在这里插入图片描述

接着我们测试一下,老规矩用gulp测试(为了验证效果,可以将npm和pnpm安装的gulp卸载,或者你也可以用其它的测试)

	npm uni -g gulp
	pnpm uni -g gulp
	yarn global add gulp
	gulp -v

ok,到此为止就基本结束,上面的内容文字可能比较多,但是我为了让你小子理解包安装的过程,可是煞费苦心呐。如果你看懂了,那么将会对包管理的安装有一个更加深刻的认识。最后,收藏点赞来一波(^▽^)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8992.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!