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

目录
相关文章
|
5天前
|
JavaScript 前端开发 定位技术
Vue项目中的虚拟滚动:提升页面渲染性能的最佳实践
本文介绍虚拟滚动技术及其在Vue项目中的应用,通过vue-virtual-scroller实现大数据量下长列表的高性能渲染,提升页面流畅度与用户体验,适用于地图轨迹等业务场景。
90 0
|
5天前
|
JavaScript 前端开发 开发工具
前端开发必备的 VSCode 插件推荐(第三期)
本文推荐两款提升Vue开发效率的VSCode插件:vue-helper,支持代码扩选、快速跳转与变量定位;别名路径跳转插件,解决@路径无法跳转问题。配置简单,实用高效,助力前端开发提速。
127 0
|
2天前
|
前端开发 JavaScript iOS开发
Volta:一款优秀的前端开发 JavaScript 项目管理器
前端开发者喵喵侠分享使用 Volta 管理 Node.js 版本的实战经验。Volta 可跨平台统一管理 Node、npm、pnpm 等工具版本,支持在 `package.json` 中锁定依赖,实现项目级环境自动切换,尤其解决了 Windows 下 nvm/nvs 的兼容问题,提升团队协作效率。
35 1
|
5天前
|
前端开发 JavaScript API
CSS弹性盒子布局图标的展示效果优化技巧
本文介绍前端开发中一个弹性布局的优化问题:小屏幕下图标错位影响美观。通过媒体查询和ResizeObserver API两种方案,实现容器宽度不足时隐藏图标,提升响应式体验。重点讲解ResizeObserver对单个元素的精准监听与Vue中的实践应用,兼顾用户体验与代码性能。
26 0
CSS弹性盒子布局图标的展示效果优化技巧
|
5天前
|
监控 数据可视化 安全
发布周期计划工具:低代码结构化发布管理体系的工程实践
系统探讨发布周期管理的挑战与解决方案,剖析责任模糊、信息不透明、反馈缺失等根源问题,提出以工具化、数据驱动为核心的现代化管理体系。涵盖责任绑定、智能依赖、自动化同步与健康度评估四大设计原理,指导技术选型、架构部署与文化构建,助力团队实现高效、可靠、可持续的软件交付,打造数字时代的敏捷竞争力。
|
5天前
|
Web App开发 前端开发 JavaScript
一次远程会议中我用到的 Chrome DevTools 调试技巧
本文由“喵喵侠”分享三个被忽视的Chrome DevTools实用技巧:删除遮挡元素、撤销误删操作、快速搜索DOM节点。通过真实场景演示,帮助开发者提升调试效率,避免因小失误影响协作,适合前端新手和非开发人员学习掌握。
49 0
一次远程会议中我用到的 Chrome DevTools 调试技巧
|
2天前
|
前端开发 程序员 API
作为前端开发,分享下我在编程中的好习惯
前端开发喵喵侠分享多年实战总结的8个编程好习惯:写前先思考、注释重“为什么”、规范命名、代码自检、写文档、Git提交规范化、表单提示友好化、果断删除无用代码。习惯决定代码质量,写出半年后自己仍能读懂的代码,才是成熟的开始。
20 0
|
5天前
|
UED 开发者
JEECG低代码平台组件JFormContainer使用方法解析
JFormContainer是JEECG低代码平台中用于控制表单禁用状态的组件。通过fieldset的disabled属性,实现表单只读切换,查看详情时自动禁用编辑。需将a-form-model放入slot="detail"中,确保禁用生效,提升用户体验。
27 0
|
5天前
|
机器学习/深度学习 人工智能 自然语言处理
论文精读:DeepSeek-R1是如何通过强化学习增强LLM推理能力的?
DeepSeek-R1通过纯强化学习与冷启动结合,实现强大推理能力,并利用蒸馏技术将“智慧”传递给小模型,推动大模型训练新范式。
65 0
|
5天前
|
JavaScript 前端开发 Shell
技术实践:快速批量下载网站图片资源实现方法
本文介绍了三种批量下载图片的方法:使用HTML页面、Node.js脚本和Bash结合Wget命令。重点推荐第三种,仅需几行命令即可高效完成下载,无需编程环境,兼容性强,适合快速批量获取网络图片资源。
96 0

热门文章

最新文章