专栏指引

前端环境搭建与准备-指引

yarn相关网站

• yarn 英文官网：yarnpkg.com
• yarn 英文官网：www.yarnpkg.cn/

yarn配置

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

1. 安装yarn

npm i -g yarn

2. 查看yarn版本

yarn -v

3. 配置yarn路径

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

3.1.1. 查看 yarn 全局bin位置

yarn global bin

默认的yarn命令bin，会存放到node的全局安装的依赖包NODE_PATH里，如下图所示

3.1.2. 查看 yarn_global 全局安装位置

yarn global dir

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

3.1.3. 查看 yarn_cache 全局缓存位置

yarn cache dir

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

3.1.4 附：查看yarn 配置列表

yarn config list

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

由上分析我们需要配置yarn全局安装与缓存路径

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

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

3.2.2. 改变 yarn 全局bin位置

yarn config set prefix "D:nvmyarn"

配置后查看bin路径yarn global bin

3.2.3. 改变 yarn_global 全局安装位置

yarn config  set global-folder "D:nvmyarn_global"

配置后查看yarn_global路径yarn global dir

3.2.4. 改变 yarn_cache 全局cache位置

yarn config set cache-folder "D:nvmyarn_cache"

配置后查看yarn_cache位置yarn cache dir

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

3.3.2. 新建变量YARN_BIN，值为D:nvmyarnbin，变量值按实际为准配置。

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

3.3.3. 新建变量YARN_CACHE，值为D:nvmyarn_cache，变量值按实际为准配置

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

%YARN_BIN%, %YARN_GLOBAL%, %YARN_CACHE%

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

用户变量或系统变量选择其一就好了。一般先找用户环境变量，如果没有则再找系统环境变量，以下我是演示两个都配置的

• YARN_BIND:nvmyarnbin
• YARN_GLOBALD:nvmyarn_global
• YARN_CACHED:nvmyarn_cache

3.3.6 配置好用户变量之后，你会在电脑用户数据里发现对应的配置命令文件

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

4. 测试yarn全局安装ts

yarn global add typescript

此时，会在yarn的global和cache中都有ts相关的文件和缓存

专栏指引

前端环境搭建与准备-指引