天天看点

Vue 开发一键更新package.json中所有模块

作者:公子邪皇

1,需求来源

最近在研究 vue3 + element plus 模版框架的时候,开源项目中的 vue 和 element plus 的版本比较老,然后就想着怎么给他升级,之前的老方法就是一个一个升级,不但费时而且麻烦,就想着有没有办法一键升级。网上搜了一圈,终于发现了npm-check-updates这个插件,顺便记录一下使用过程。

2,老的升级方式

使用 npm info xx 查看某个模块的版本

Vue 开发一键更新package.json中所有模块

使用 npm/cnpm/pnpm/yarn 等安装你需要的版本,需要执行相应的命令,这里我用的是 pnpm

Vue 开发一键更新package.json中所有模块

3, 安装 npm-check-updates

cnpm install -g npm-check-updates

npm install -g npm-check-updates           

4,检查 package.json 中的模块

进入对应的项目中,执行 npm-check-updates或者 ncu 简写命令检查是否有更新. 执行成功后,就会出现下图中的内容。但是这个时候只是检测了,并没有更新package.json 文件,需要执行下图中的命令来尽心更新。

Vue 开发一键更新package.json中所有模块

5,更新 package.json 中的模块

执行命令 ncu -u 来更新模块的版本到 package.json 文件中,可以看到下图2中的版本已经是最新的了,然后根据实际情况调整内容就可以。

Vue 开发一键更新package.json中所有模块
Vue 开发一键更新package.json中所有模块

6,更新所有模块

我这里用的是 pnpm install 命令来更新, npm/cnpm/yarn 需要执行自己对应的命令。这样一键更新所有模块就算完成了,启动后,如果有报错提示,只需要进行相依调整即可。