window下nvm托管node和yarn安装项目依赖卡住问题

wuliang_berry
700 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

写在前面

本文针对win10环境，终端是bash

1. nvm介绍

前端项目中不同项目时常需要不同的node版本环境支持，但我们不可能每次开发一个项目就安装对应node版本环境，开发另外一个项目，再把当前node版本环境卸载，然后接着安装另一个node版本环境。

以上方式虽然也可以，但是不推荐，因为实际项目开发中，大多时候开发人员都需要并行开发多个项目，如果在多个项目中来回切换时，每次都卸载然后安装对应项目的node环境，可想而知效率会相当低。

综上考虑，我们需要一个工具来帮助开发人员管理多个node版本，并且快捷在多个node版本之间来回切换，这个工具是传说中的 nvm

2. nvm使用之前

注意：由于需要nvm管理多个node版本，所以如果我们本地环境已经安装过node，则需要将本地的npm卸载，防止对nvm中安装的node的npm有干扰（这个很重要）

2.1 卸载本地环境node

  1. window下直接在控制面板中搜索node，将其卸载；
  2. 接着在C盘中或者C:\Program Files中搜索node，将之前安装的node删除
  3. 再检查环境变量中是否有对node或者npm的引用，如果有将其删除
  4. 最终在bash命令行使用where node查找，如果有显示node路径，则顺着路径将其删除

2.2 nvm安装

官方下载地址：github.com/coreybutler…

win10下载nvm-setup.zip，可以解压一键安装。nvm-noinstall.zip是绿色版。这里推荐下载nvm-setup.zip

image.png

安装过程如下：

image.png

下面需要选择一个安装目录，笔者安装在D:\nvm下，点击next下一步

image.png

下面这里需要选择一个目录（笔者这里是：D:\nvmproject\nodejs），后续nvm会将当前使用node版本环境copy到此目录下：

image.png

然后next一键安装

2.3 nvm环境配置

安装完nvm之后，在cmd和bash命令行下，还无法使用nvm命令，需要配置对应的环境变量，在系统变量的path中增加前面选择的nvm安装目录，再增加前面选择的nvm安装当前node版本的目录。

image.png

配置完成后，命令行验证下，nvm -v，如果出现版本号，说明nvm安装配置成功，如果不成功，自行google下nvm环境配置

image.png

2.4 更新镜像源settings.txt

settings.txt在前面指定的nvm的安装目录下，D:\nvm\settings

// 将如下两行拷贝到settings.txt的末尾
node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/

3. nvm的使用

3.1 基本使用

nvm list   // 查看nvm已经安装的node版本（*表示当前正在使用node版本）
nvm list available // 查看可以nvm可依赖的node版本
nvm install 14.17.1 // 安装版本号是14.17.1版本的node
nvm use 14.17.1 // nvm切换版本将14.17.1作为当前正在使用的版本

image.png

3.2 配置多node版本全局依赖共享

备注：每次切换node环境之后，如果使用npm或者yarn安装全局依赖时，都会默认安装到当前版本的node环境下；如果切换node环境之后，之前安装到全局的依赖就会失效。

由于失效问题，如果想使用yarn，可能需要在当前的node环境下重新npm install yarn；但每次切node版本，重新装依赖很麻烦， 所以新建配置两个文件夹（全局依赖文件夹：D:\nvmproject\node_global、cache文件夹：D:\nvmproject\node_cache）存放全全局依赖。

  • npm安装全局依赖包：npm install 包名 -g
  • yarn安装全局依赖包: yarn add 包名 global
  • 查看npm包的全局安装路径npm prefix -g
  • 查看npm的配置列表npm config ls
  • 查看npm全局安装过的依赖包：npm list -g --depth=0
  • 修改npm包的全局安装路径npm config set prefix "D:\nvmproject\node_global"
  • 修改npm包的全局cache位置：npm config set cache "D:\nvmproject\node_cache"
  • 查看yarn的配置列表：yarn config list
  • 查看yarn的全局bin位置：yarn global bin
  • 查看yarn全局安装位置：yarn global dir
  • 查看yarn全局cache位置：yarn cache dir
  • 查看yarn全局安装过的包：yarn global list --depth=0
  • 修改yarn的bin位置：yarn config set prefix "D:\nvmproject\yarnbin"
  • 修改yarn的全局安装位置：yarn config set global-folder "D:\nvmproject\node_global"
  • 修改yarn的全局cache位置：yarn config set cache-folder "D:\nvmproject\node_cache"
  • 修改yarn的全局link位置：yarn config set link-folder "D:\nvmproject\yarnlink"

在环境变量中配置我们指定的global全局依赖位置；在用户变量的path增加D:\nvmproject\node_global，接着再系统环境变量中配置变量值：NODE_PATH， 变量值是：D:\nvmproject\node_global\node_modules

注意：每个未指定过node版本的都需要指定一次：

yarn config set global-folder "D:\nvmproject\node_global"
yarn config set cache-folder "D:\nvmproject\node_cache"

4. 使用yarn安装项目初始依赖时出现卡住问题

在Building fresh packages...阶段waiting....卡住

[4/4] Building fresh packages...
[10/10] ⠐ node-sass
[9/10] ⠈ ejs
[3/10] ⠈ chromedriver
[-/10] ⠈ waiting...
[-/10] ⠈ waiting...

image.png

解决方案：可以在项目目录下创建.yarnrc（使用yarn安装时）或者.npmrc（使用npm安装时）文件；文件内容：

registry "https://registry.npm.taobao.org"

sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

然后再重新yarn install或者npm install

avatar
文章
阅读
粉丝