目录
- 前言
- 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,执行远程脚本:
代码语言:bash复制iwr https://get.pnpm.io/install.ps1 -useb | iex
Mac安装pnpm
打开终端,执行远程脚本:
代码语言:bash复制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 的版本。
代码语言:json复制"devDependencies": {
"webpack": "^4.0.0"
}
总结
使用pnpm来管理Vue2项目的依赖,可以带来显著的性能提升和磁盘空间节省。虽然可能会遇到一些配置上的问题,但通过适当的调整和配置,pnpm可以成为一个强大的包管理工具。
希望这篇文章对你在Vue2项目中使用pnpm有所帮助。如果你有任何问题或建议,欢迎与我交流。