vue-demi打通pnpm替换npm导致的pinia使用问题

背景

项目最近做了一次大迭代,想要抛弃之前的东西做一次整体的优化,组里前端开发苦此久矣。

npm安装依赖时间长,项目有时候会出现某些依赖安装失败的情况,再次npm i之后还是进行下载,耗时如下:

使用公司的电脑还会受困于node版本的问题,新项目采用rspack,需要采用16以上版本的node才能正常运行,但公司电脑只能用14的版本进行安装依赖才能成功,虽说有nvm做版本管理,还是有些许的麻烦。

因此就想要用pnpm去替换npm安装依赖的方式。

pnpm的优势

npm安装依赖的时候,包与包之间是隔离的,因此会出现依赖重复下载的问题,加大了node_modules的体积,延长了依赖安装的时间。

yarn采用平铺的方式解决了npm递归嵌套的问题,但却出现了幽灵依赖的问题。

pnpm从根源上解决了这俩问题,在安装依赖时就进行了依赖去重,采用全局存储和符号链接机制 的方式解决了两者存在的问题,将重复的依赖挂载.pnpm``的目录下。

替换步骤

全程都是使用的node20版本

全局安装pnpm

css 复制代码
npm i -g pnpm

卸载node_modules包

复制代码
rimraf node_modules

pnpm安装依赖

css 复制代码
pnpm i

安装速度如下:

可以说减少了一半的时间,这还是在node20版本下,切换为其他项目npm就可能会需要3分钟的时间

再次安装依赖时长

将package.json文件中的依赖做一些改动,再次安装依赖的时间只需要34s

使用pnpm在其他版本的项目中运行

其他项目都基本是node14去跑,还可能会有node-sass这种依赖

这时候得使用pnpm@7以下的版本来安装

只要没有node-sass都可以直接用pnpm和node20的版本来做依赖的安装

踩坑记录

rspack运行的项目会有缓存,所以一开始切换完之后启动项目没有任何问题出现,直到打包的时候出现了下列报错:

经过一番搜索,说是pinia版本过高的问题,于是调整pinia的版本为2.0.36,重新安装依赖

出现问题,原先的store的取值变成了ref的形式,导致原有的逻辑需要进行大改,还是还原成原来的pinia版本。

pinia的官方文档写了,pinia是可以支持vue2和vue3的,所以是有什么不知道的东西没去兼容

于是去翻找pinia版本的更新日志发现下列描述:

从2.1.0版本就需要vue3.3才可以使用或者是使用vue-demi的vue2版本,这个vue-demi是什么呢?

搜索一番后了解到vue-demi是为了让vue2的项目可以直接使用vue3的api,为了后续升级改造而添加的兼容工具,在pinia的依赖中也存在了这个工具,所以是piniavue-demi没有适配到当前项目的vue版本?

于是执行了以下命令去兼容这个问题:

arduino 复制代码
npx vue-demi-switch 2.7

但我们项目依赖中并没有这个东西,只是pinia自己的依赖有,这个命令执行了并没有效果,所以需要在package.json中增加:

json 复制代码
"vue-demi": "latest"

重新执行指定版本的命令,成功运行,并且打包也没有问题。

运行命令补充

换了电脑可能不一定会记得要去执行vue-demi的命令,所以在运行命令中增加一条。

json 复制代码
 "dev": "npx vue-demi-switch 2.7 && rspack serve --config build/rspack.dev.conf.js"
相关推荐
Jerry24 分钟前
Compose 基础知识测试
前端
changuncle32 分钟前
Angular初学者入门第三课——工厂函数(精品)
前端·javascript·angular.js
ScottePerk1 小时前
前端安全之XSS和CSRF
前端·安全·xss
PineappleCoder1 小时前
Canvas 复杂交互步骤:从事件监听 to 重新绘制全流程
前端
s3xysteak1 小时前
我要成为vue高手01:上下文
前端·javascript·vue.js
复苏季风1 小时前
前端居中布局:从 "卡壳" 到 "精通" 的全方位指南
前端·css
qb1 小时前
vue3.5.18源码:computed 在发布订阅者模式中的双重角色
前端·vue.js·架构
程序员张31 小时前
Vue3+ElementPlus倒计时示例
javascript·vue.js·前端框架
专注VB编程开发20年1 小时前
c# .net支持 NativeAOT 或 Trimming 的库是什么原理
前端·javascript·c#·.net
挽淚1 小时前
前端HTTP请求:Fetch api和Axios
前端