yarn配置

姜姜小妞
10,537 阅读7分钟

前言

yarn相关网站

👻 yarn 英文官网：yarnpkg.com

👻 yarn 中文官网：www.yarnpkg.cn/

yarn安装配置流程

当我们使用nvm管理版本时，同样的，我们需要配置yarn的全局安装路径和缓存路径

💨 全局安装yarn

💨 配置yarn_global 全局安装位置，yarn_cache 全局cache位置

💨 添加环境变量：YARN_GLOBAL、YARN_CACHE

1️⃣. 安装yarn

npm i -g yarn

image.png

2️⃣. 查看yarn版本

yarn -v

image.png

如果你之前的npm（或者是node）全局依赖路径已经不再是默认路径或者没有配置npm的全局依赖路径，那么你需要重新配置npm，可以看上一篇：npm配置 ，再回来继续配置yarn。或者看下图，快速配置环境变量NODE_GLOBAL值为 命令行输入npm prefix -g的结果值 再在path变量后追加%NODE_GLOBAL%值。

image.png

image.png

例如，我在没有配置node环境变量前就安装全局yarn，然后发现，并不能找到yarn命令，如下图所示：

image.png

3️⃣. 配置yarn路径

3.1 查看基础bin，yarn_global， yarn_cache路径

3.1.1. 查看 yarn 全局bin位置

yarn global bin

image.png

默认的yarn命令bin，会存放到npm的全局安装的依赖包NODE_GLOBAL里的bin，这样说可能不够理解，我使用案例说明。

我使用yarn全局安装了typescript（后续简称ts），在yarn_global全局安装路径中的node_modules目录中会有typescript包。 此时是无法使用ts命令行，需要配置yarn bin运行命令路径到环境变量后才可以使用ts命令行。后续会说 image.png

（在没有.bin目录文件夹时） 可以看到同一个目录下的会新建一个.bin。 image.png

于此同时，npm的全局安装的依赖包NODE_GLOBAL里的也会同步生成bin目录文件。而这个文件夹里是ts的命令行。除了一些basedir变量的路径引用不同外，这两个bin文件夹内容几乎是一样的。 image.png

有些开发者在不明白使用的某个依赖包是yarn的命令行还是npm的命令行，想集中管理yarn的相关路径。这就是为何我习惯性重新配置yarn bin目录路径到yarn global中。当然你也可以不用重新配置yarn bin路径，但是记得把它配置到环境变量中。否则使用yarn全局安装的依赖包的命令行是调用失败的。

例如，我配置了这个bin环境变量（别忘了重启命令行哟）

image.png

image.png

动手之后，你或许有疑问为啥我配置为D盘的yarn bin路径到环境变量就不行，明明看着不都一样的命令行嘛，所以你知道为何后面需要配置 yarn的prefix了吗，这就是要统一一个bin文件夹。

image.png image.png

3.1.2. 查看 yarn_global 全局安装位置

yarn global dir

image.png

默认yarn全局安装路径是放在C盘的用户数据里的，例如上面我们提及到的，如果yarn全局ts后，yarn默认把ts放到用户本地数据中，后面我们是需要更改的。

image.png

3.1.3. 查看 yarn_cache 全局缓存位置

yarn cache dir

image.png

默认yarn全局缓存路径是放在C盘的用户数据里的，后面我们是需要更改的

image.png

3.1.4 附：查看yarn 配置列表

yarn config list

image.png

3.2 配置yarn全局安装与缓存路径

由上分析我们需要配置yarn全局安装与缓存路径，此外为了统一一个bin文件夹，我们需要配置yarn的prefix。 image.png

在此之前，请先清除以下文件数据，同时转移yarn全局全局安装的依赖包（建议删除）

3.2.0. 清除yarn配置的相关文件夹

请按步骤进行，要不然可能会有残留的yarn cache文件。

3.2.0.1 清除yarn bin创建的默认副本bin文件

输入以下命令，找到yarn bin 副本bin文件

yarn global bin

image.png

image.png

3.2.0.2 清除yarn默认全局安装路径与缓存路径

输入以下命令，找到yarn默认全局安装路径与缓存路径

yarn cache dir

image.png

image.png

3.2.0.3 清除环境path变量中的yarn全局 bin路径。

image.png

3.2.1. 在nvm 安装路径下新建两个文件夹分别为，yarn_global,yarn_cache

其中：

🥚 yarn_global 存放yarn全局安装的依赖包文件夹

🥚 yarn_cache存放yarn命令缓存信息

我是把yarn配置到nvm安装路径下进行统一管理的

image.png

3.2.2. 改变 yarn 全局bin位置

yarn config set prefix "D:\nvm\yarn_global"

配置后查看bin路径yarn global bin

image.png

3.2.3. 改变 yarn_global 全局安装位置

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

配置后查看yarn_global路径yarn global dir

image.png

3.2.4. 改变 yarn_cache 全局cache位置

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

配置后查看yarn_cache位置yarn cache dir

image.png

别忘了清除yarn默认缓存路径，因为在配置重新配置cache路径成功之前的缓存都会在yarn默认缓存路径。例如，我需要重新清除以下文件。

image.png

3.2.5 yarnrc文件

当我们使用命令行配置yarn时会生成yarnrc配置文件夹，默认位置为C:\Users\{用户名}

image.png

以下是我们已经配置好的

image.png

关于.yarnrc，其实和.npmrc一样属于配置化的东西，后续有时间会写关于这两个配置在项目搭建中使用的。这两个一般程序员很少关注，但是对于前端框架师在搭建demo时很有用。

3.3 配置yarn进环境变量缓存中

3.3.1. 新建变量YARN_BIN，值为D:\nvm\yarn_global\bin，变量值按实际为准配置。

要配置全局安装的bin目录，否则全局安装的依赖的命令不可用。

可以使用命令行yarn global bin查询出需要配置的路径

image.png image.png

3.3.2. 新建变量YARN_GLOBAL，值为D:\nvm\yarn_global，变量值按实际为准配置。

这个YARN_GLOBAL变量一般也不需要添加到环境变量中，因为.yarnrc文件里已经配置了全局变量。只是我习惯性操作而已。 image.png

3.3.3 把上面的变量都添加到Path中

%YARN_BIN%, %YARN_GLOBAL%。注意顺序。

image.png

3.3.4 用户环境和系统环境都需要配置一致

用户变量或系统变量选择其一就好了。一般先找用户环境变量，如果没有则再找系统环境变量

🐏 YARN_BIND:\nvm\yarn_global\bin

🐏 YARN_GLOBALD:\nvm\yarn_global

4️⃣. 测试yarn全局安装ts

4.1 全局安装typescript

yarn global add typescript

image.png

查看ts的版本正常，证明能查找到yarn的全局安装依赖的命令行，配置成功（记得在配置好环境变量后，重启命令行嗷），请确保YARN_BIN环境变量的配置。

tsc -v

image.png

4.1检查配置

此时，我们来检查一下我们的需求：

4.1.1 yarn 全局安装位置

🌿 yarn 全局安装的依赖在设置好的yarn global路径(D:\nvm\yarn_global) image.png

4.1.2 yarn 缓存位置

🌿 yarn命令运行的缓存cache在设置好的yarn cache路径（D:\nvm\yarn_cache） image.png 你可以检查yarn原来的缓存位置是否还有相关的cache文件（正确是没有）

4.1.3 yarn bin命令行位置

yarn bin命令没有多余副本，全部都在设置好的yarn bin目录（D:\nvm\yarn_global） image.png ，你可以检查node_global路径是否还有bin文件夹（正确是没有），检查yarn原来默认的全局bin路径是否还有多余bin文件夹（正确是没有）

专栏指引

avatar
文章
阅读
粉丝