注意:这篇文章文字较多,有不理解的先往下看,大部分文字只是为了让读者理解原理,不需要完全读懂依然可以实现安装(斜字体可忽略)
前情提要:最近发现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_cache
和yarn_global
前者存放缓存文件,后者存放node_modules和bin
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,到此为止就基本结束,上面的内容文字可能比较多,但是我为了让你小子理解包安装的过程,可是煞费苦心呐。如果你看懂了,那么将会对包管理的安装有一个更加深刻的认识。最后,收藏点赞来一波(^▽^)