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

简介: 本文介绍如何在Vue2项目中使用pnpm包管理器,涵盖其快速安装、高效磁盘利用、严格依赖管理等优势,并详细说明Windows和Mac下的安装步骤及关键配置方法,如新建.npmrc文件解决兼容性问题,帮助开发者顺利迁移并提升项目维护效率。

目录

前言

你好,我是喵喵侠。虽然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有所帮助。如果你有任何问题或建议,欢迎与我交流。

目录
相关文章
|
JSON 前端开发 JavaScript
微前端项目难点解决(二)
微前端项目难点解决
1590 0
|
前端开发 算法 API
直接在前端做 zip 压缩/解压
前段时间研究前端是如何解析 excel 表格的时候了解到 jszip 这个库,可以直接在前端对 zip 包进行压缩和解压缩,今天稍微水一篇。
|
10月前
|
JavaScript 前端开发 定位技术
Vue项目中的虚拟滚动:提升页面渲染性能的最佳实践
本文介绍虚拟滚动技术及其在Vue项目中的应用,通过vue-virtual-scroller实现大数据量下长列表的高性能渲染,提升页面流畅度与用户体验,适用于地图轨迹等业务场景。
1975 0
|
10月前
|
JavaScript 前端开发 开发工具
前端开发必备的 VSCode 插件推荐(第三期)
本文推荐两款提升Vue开发效率的VSCode插件:vue-helper,支持代码扩选、快速跳转与变量定位;别名路径跳转插件,解决@路径无法跳转问题。配置简单,实用高效,助力前端开发提速。
1549 1
|
10月前
|
前端开发 JavaScript API
CSS弹性盒子布局图标的展示效果优化技巧
本文介绍前端开发中一个弹性布局的优化问题:小屏幕下图标错位影响美观。通过媒体查询和ResizeObserver API两种方案,实现容器宽度不足时隐藏图标,提升响应式体验。重点讲解ResizeObserver对单个元素的精准监听与Vue中的实践应用,兼顾用户体验与代码性能。
229 0
CSS弹性盒子布局图标的展示效果优化技巧
|
存储 缓存 JavaScript
NPM怎样清空缓存
NPM怎样清空缓存
|
10月前
|
JSON 缓存 API
淘宝详情API接口概述,文档说明
淘宝详情API接口是淘宝开放平台提供的重要接口,旨在允许开发者通过编程方式获取淘宝商品的详细信息,以下是对其的详细介绍及文档说明:
|
10月前
|
自然语言处理 监控 数据可视化
​​​​​​​挖掘用户心声:利用京东评论API驱动产品与服务优化
本文介绍如何通过京东评论API获取商品用户评价数据,结合数据分析与NLP技术,挖掘用户真实反馈,进行评分分布、情感分析、关键词提取与主题建模,并通过可视化手段呈现洞察,最终驱动产品优化、服务升级与用户体验提升,实现数据驱动的精细化运营。(238字)
|
Windows
Windows下版本控制器(SVN)-启动服务器端程序
Windows下版本控制器(SVN)-启动服务器端程序
829 4