前言

归属专栏：《前端环境搭建与准备-指引》

上一篇：nvm安装与配置

本文内容：npm 配置全局缓存和依赖安装路径、手动添加npm的环境变量

下一篇：yarn管理

概念解释

在动手之前，需要了解下文中提及的一些前置知识，我们必须要知道为啥这样配置或者配置的作用

💗node_global

🌸 node_global：npm全局下载依赖时，会默认下载到当前使用的nodejs版本的路径文件夹。这就导致了如果我切换另外一个nodejs时，之前全局安装的依赖都无法使用。为了解决这个问题，我们需要把全局默认下载依赖的统一放到一个文件夹中，我们一般会命名这个文件夹名为node_global。

💗node_cache

🌸 node_cache：我们在运行npm命令执行操作的时候，会默认在C:\Users\{用户}\AppData\Local\npm-cache中生成一些缓存数据，这是我们不想增加到C盘，我们会把缓存数据统一放置。我们一般会把npm的缓存与npm全局安装的依赖，这两个文件夹放到同级目录下，命名npm的缓存文件为node_cache或者npm_cache

以下演示，我把npm全局文件夹命名node_global，npm缓存文件夹命名为node_cache，并统一放到nvm安装路径D:\nvm下

npm配置流程

🍋 1️⃣、在目标路径，新建全局预设prefix文件夹node_global和缓存cache文件夹node_cache

🍋 2️⃣、cmd超管身份配置prefix为node_global路径、配置cache为node_cache路径

🍋 3️⃣、移动全局安装的依赖包到目标全局预设prefix文件夹路径

🍋 4️⃣、手动添加环境变量：NODE_GLOBAL值为全局预设路径,NODE_PATH值为%全局预设路径%\node_modules

。

。👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻👻

。

❤npm 配置

使用 nvm 时，默认的 prefix 是当前激活的 Node.js 版本的安装路径。带来一个问题是：切换版本之后，之前安装全局命令模块需要重新安装，非常不方便。解决方案是配置统一的全局模块安装路径。

1️⃣. 新建全局预设路径与缓存路径

在目标路径新建全局预设路径与缓存路径，例如，我是在安装nvm的存放路径中新建两个文件夹node_global, node_cache

2️⃣. 命令行配置npm全局预设与缓存

win+r 使用cmd管理员权限操作，分别输入以下命令配置全局预设与缓存

💗2.0 命令警告

如果在配置时输入npm命令出现npm警告如下：

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

可以直接查看另一篇文章的npm警告了解详情

💗2.1 配置命令格式

npm config set prefix "全局预设路径" cache "缓存路径"

我的命令示例

npm config set prefix "D:\nvm\node_global" cache "D:\nvm\node_cache"

💗2.2 查看确认全局预设与缓存配置：

⭐ 查看npm全局预设

npm prefix -g

⭐ 查看npm缓存

npm config get cache

如果你使用npm config set prefix "全局预设路径" cache "缓存路径"连串命令设置不成功，请单独使用命令npm config set prefix "全局预设路径"和npm config set cache "缓存路径"设置，如图所示：

💗2.3 配置完成

当我们输入配置命令后，会在用户数据C:\Users\{用户}出现.npmrc文件。

内容如下：

这正是我们配置的全局预设与缓存路径

💗2.4 测试

💗2.4.1 测试缓存

在测试我们的缓存配置是否成功之前，建议先删掉或者清空原来的npm缓存路径，默认缓存路径为C:\Users\{用户}\AppData\Local\npm-cache，

我们输入任意npm命令，可以看到，我们配置的缓存路径下多了一些打印日志的文件，证明我们的缓存配置成功了

💗2.4.2 测试全局预设

💗2.4.2.1 测试新安装的依赖

我测试全局安装新的依赖@vue/cli

npm install -g @vue/cli

发现全局安装的依赖都到我们刚才指定的目录下了，证明我们的prefix配置成功了。

但是当我们测试查看vue版本时，却发现，行不通呀？

为啥呀？我明明都配置了全局预设命令为啥还会出现这个问题？

因为我们配置prefix预设只是告诉了npm安装依赖到全局预设路径下，我们也需要告诉电脑，当我们输入cli命令时，去到全局预设路径下查找,这就是为什么我们要添加环境变量

我们后续会添加NODE_GLOBAL环境变量值为全局预设路径，我们先暂时不做多描述

💗2.4.2.2 测试已安装的依赖

请注意，因为我们之前已经安装过很多全局包，当我们直接使用任意cli包的命令时，，发现，竟然成功，你以为就结束了吗？不，高兴得太早了，为啥呢，再听我吧啦吧啦一下：

🍀 我们安装nodejs，一般对应的node_modules里只有corepack、npm这两个文件夹

🍀 全局安装依赖是默认安装到当前版本的nodejs里的node_modules文件夹。

🍀 使用命令配置完npm的全局预设prefix后，我们之前安装的依赖没有做移动处理或重新安装

🍀 当我们使用命令校验依赖包是否存在或已安装时，会发现，命令行居然不报错

例如：我之前安装了typescript，默认是在当前nodejs 版本 v16.16.0 里的node_modules，我输入命令行校验，是成功的（即使我们后面环境变量配置了NODE_GLOBAL后也一样）。

原因是我们电脑环境查找输入的命令判断是path，我们之前已经在nvm安装与配置中，配置好了nodejs路径。

path路径是按顺序进行查找可执行命令，即使我们后续配置过NODE_GLOBAL也是一样。按上图所示的，path路径解析从上往下查找，找到就停止。

所以这就是为什么不移动原来全局安装的依赖包，也可以使用。

但是这个导致了，我们新旧依赖包存到不同的文件夹下，不方便维护。这就是为什么我们需要在配置npm的prefix全局预设node_global后还需要进行移动旧的依赖包或重新安装依赖包。

3️⃣、移动已安装的全局包

如果你不需要保留之前安装的全局包，或者你从未安装过全局的依赖包，那么你可以跳过这一步

移动全局安装的依赖包到目标全局预设prefix文件夹路径，原全局安装路径只保留corepack和npm文件夹。这是为了避免依赖残留，导致后续调试差异。

🌸 before

🌸 after

4️⃣. 添加环境变量

⭐ 上文提到，配置了prefix全局预设路径后，当我们移动完全局依赖到目标全局预设文件夹中或者测试新安装的依赖，并不能成功找到依赖包。这就是我们需要配置NODE_GLOBAL为全局预设路径的原因，例如，我在没有配置node环境变量前就安装全局yarn，然后发现，并不能找到yarn命令，如下图所示：

⭐ 当我们有很多项目有共同的依赖，例如A项目需要依赖express，B项目需要express，如果你没有在项目根目录安装express依赖，那么node模块解析算法就会根据环境变量NODE_PATH设置的路径中查找依赖，当我们安装全局依赖，我们的项目就可以共享全局中的依赖包。虽然官网上也说没必要配置这个变量，但是事实证明，如果你专门部署项目，在部署中频繁使用大量的相同的依赖，全局依赖包是真的yyds，这就是为什么NODE_PATH为全局预设依赖包路径的原因。（又或者你可以使用pnpm共享依赖包）

或者你想了解node模块解析算法，从全局文件夹加载

💗流程

🌸 1️⃣、新建变量NODE_GLOBAL，值为全局预设路径

🌸 2️⃣、新建变量NODE_PATH，值为%全局预设路径%\node_modules

🌸 3️⃣、把%NODE_GLOBAL%、%NODE_PATH%添加到path中

我是把node相关的都配置到nvm目录下进行统一管理的。以下的变量值自行按实际为准配置。

💗4.1 新建变量`NODE_GLOBAL`，值为`全局预设路径`

以下是我的值为D:\nvm\node_global，变量值按实际为准配置。

💗4.2 新建变量`NODE_PATH`，值为`%全局预设路径%\node_modules`

以下是我的值为%NODE_GLOBAL%\node_modules，如果值路径下没有node_modules文件夹，请先建一个。变量值按实际为准配置。

💗4.3 配置到Path中，请注意顺序，如图

%NVM_HOME%、%NVM_SYMLINK%、%NODE_GLOBAL%、%NODE_PATH%

🌸 用户环境和系统环境保持一致的配置，把以上涉及的用户变量都在系统变量中重新配置一样的涉及到的变量和值有(值是我自己根据安装配置的，仅作为参考，请以实际为准)：
- NVM_HOMED:\nvm
- NVM_SYMLINKD:\nvm\nodejs
- NODE_GLOBALD:\nvm\node_global
- NODE_PATH%NODE_GLOBAL%\node_modules

以上4个变量和配置，在系统变量中同样配置。如果不配置也是可以的。一般是先使用用户变量，如果用户变量中没有，则使用系统变量。

💗4.4 以上涉及的变量是什么意思呢

🌵 NVM_HOME nvm安装路径

🌵 NVM_SYMLINK nvm切换使用node版本后，生成快捷方式指向的，快捷方式路径

🌵 NODE_GLOBAL node全局安装依赖的路径

🌵 NODE_PATH node全局安装的依赖包路径

。。

🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑🐑 。。

npm其他相关内容

yarn管理

看到这里，我们就可以进入yarn管理

归属专栏：《前端环境搭建与准备-指引》

上一篇：nvm安装与配置

下一篇：yarn管理

npm 配置

前言