如何在Vue2项目中完美集成pnpm？

目录

• 前言
• pnpm介绍
  • 快速安装
  • 高效的磁盘空间利用
  • 更严格的依赖管理
• 为什么要在Vue2项目中使用pnpm？
• pnpm安装
  • Windows安装pnpm
  • Mac安装pnpm
• 配置
  • 新建.npmrc文件
  • package.json配置（可选）
• 总结

前言

你好，我是喵喵侠。虽然Vue3已经出来好几年了，但还是有很多前端旧项目，用的技术栈都是Vue2。使用Vue2就意味着，包管理器只能用npm或者yarn 1.x。而pnpm作为一款全新的包管理器，对项目环境的依赖有要求，要想顺利使用它，则需要做好相关的配置工作。接下来我将会为你介绍pnpm的特点，为什么要使用pnpm，以及具体的配置和解决报错的方法。

pnpm介绍

pnpm 是一种高效、快速、节省磁盘空间的包管理器，它与npm和yarn类似，用于管理JavaScript项目的依赖。pnpm的独特之处在于它采用了一种不同的方式来处理依赖包的安装和管理。

它具有以下特点：

快速安装

pnpm采用了一种独特的方式来管理node_modules，它使用硬链接和符号链接将包链接到项目中。这种方式不仅减少了磁盘空间的占用，还大大提高了安装速度。

高效的磁盘空间利用

pnpm会将所有的包存储在全局的存储中，并使用硬链接的方式将这些包链接到各个项目的node_modules目录下。这样，即使在多个项目中使用相同的依赖，也只会在磁盘中存储一份拷贝。

更严格的依赖管理

pnpm在安装包时会严格按照package.json中的依赖树来构建node_modules，这样可以避免npm和yarn中可能出现的“幽灵依赖”问题、

为什么要在Vue2项目中使用pnpm？

看了上面的介绍，你应该能知道，最大的好处是可以解决磁盘空间的问题，相同依赖只会安装一次，下次需要的时候会从全局目录那建立一个软链接，每个项目都可以共享相同的依赖，这样项目的node_modules就会小很多。

“幽灵依赖”的问题，在我遇到的Vue2的项目中暂时解决不了，因为pnpm会对node_modules进行特别的目录结构化处理，因此还是建议使用npm相同的node_modules，保证项目稳定运行和构建。

pnpm安装

Windows安装pnpm

打开PowerShell，执行远程脚本：

iwr https://get.pnpm.io/install.ps1 -useb | iex

Mac安装pnpm

打开终端，执行远程脚本：

curl -fsSL https://get.pnpm.io/install.sh | sh -

这里有个官方文档，可以参考下：

安装 | pnpm中文文档 | pnpm中文网

不推荐使用pnpm i pnpm -g，可能会出现报错问题，比方说下图所示。

所有每次还是覆盖安装下最好。

需要注意的是，pnpm的安装，可能会遇到网络问题，需要自行挂代理解决。

配置

新建.npmrc文件

如果你不在.npmrc文件里面加这一行配置，执行npm run serve后，可能会和我一样，出现下面的报错。

 ERROR  Failed to compile with 1 error                                                                                                                                                             10:54:16

Failed to resolve loader: cache-loader
You may need to install it.

而你新建一个.npmrc后，文件内容需要加一行代码：

node-linker=hoisted

这样就能保证你的node_modules结构跟npm安装的一模一样了，npm run serve就正常啦。

之前我也不知道这个问题怎么解决，后来找了好久，在github上得到了靠谱的答案。

Failed to resolve loader: cache-loader You may need to install it. · Issue #3585 · pnpm/pnpm

感兴趣的话，可以了解下node-linker的配置，看一眼你就明白这是做什么的了。

.npmrc | pnpm

package.json配置（可选）

如果你使用的是webpack4 的版本，可能用pnpm安装的会变成webpack5的版本，具体为什么我也不清楚。所以你最好在package.json要指定webpack为 4 的版本。

"devDependencies": {
  "webpack": "^4.0.0"
}

总结

使用pnpm来管理Vue2项目的依赖，可以带来显著的性能提升和磁盘空间节省。虽然可能会遇到一些配置上的问题，但通过适当的调整和配置，pnpm可以成为一个强大的包管理工具。

希望这篇文章对你在Vue2项目中使用pnpm有所帮助。如果你有任何问题或建议，欢迎与我交流。