专栏指引

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

yarn相关网站

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

yarn配置

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

1. 安装yarn

npm i -g yarn

yarn配置

2. 查看yarn版本

yarn -v

yarn配置

3. 配置yarn路径

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

3.1.1. 查看 yarn 全局bin位置

yarn global bin

yarn配置

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

yarn配置

3.1.2. 查看 yarn_global 全局安装位置

yarn global dir

yarn配置

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

3.1.3. 查看 yarn_cache 全局缓存位置

yarn cache dir

yarn配置

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

3.1.4 附:查看yarn 配置列表

yarn config list

yarn配置

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

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

yarn配置

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

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

yarn配置

3.2.2. 改变 yarn 全局bin位置

yarn config set prefix "D:nvmyarn"

配置后查看bin路径yarn global bin

yarn配置

3.2.3. 改变 yarn_global 全局安装位置

yarn config  set global-folder "D:nvmyarn_global"

配置后查看yarn_global路径yarn global dir

yarn配置

3.2.4. 改变 yarn_cache 全局cache位置

yarn config set cache-folder "D:nvmyarn_cache"

配置后查看yarn_cache位置yarn cache dir

yarn配置

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

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

yarn配置

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

yarn配置

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

yarn配置

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

%YARN_BIN%, %YARN_GLOBAL%, %YARN_CACHE%

yarn配置

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

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

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

yarn配置

yarn配置

yarn配置

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

yarn配置

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

4. 测试yarn全局安装ts

yarn global add typescript

yarn配置

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

yarn配置

yarn配置

专栏指引

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

发表回复

提供最优质的资源集合

立即查看 了解详情