官网 Vue CLI
偶然发现 Node.js 16.20.2 下载依赖会提示 eslint@7.15.0 的对等依赖的警告。最终决定升级到 vue cil5
作者的 Node.js 版本为 18.20.8
第一步 升级 vue cli 全局包
npm list -g
npm uninstall vue/cli -g
npm install -g @vue/cli
第二步 进入项目根目录 执行升级命令
vue upgrade
执行以上命令，会提示如下
输入Y 回车后
@vue/cli-service from 4.4.6 to 5.0.9 代表 @vue/cli-service 升级成功
然后作者就报错了，如图：
@vue/cli-plugin-eslint@4.4.6 所需对等依赖为 @vue/cli-service@"^3.0.0 || ^4.0.0-0" 。
但是之前 @vue/cli-service 升级为 5.0.9
这个时候发现运行 npm install @vue/cli-plugin-eslint@next --save-dev 会报 peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.4.6 。反过来下载 @vue/cli-plugin-babel@next 也是一样的情况。
第三步 交替单独安装
先卸载冲突的
npm uninstall @vue/cli-plugin-babel
再升级
npm install @vue/cli-plugin-eslint@next --save-dev
再安装最新的
npm install @vue/cli-plugin-babel@next --save-dev
第四步 升级其他仓库
我们知道，vue cli@5 底层是 webpack@5。为什么项目里更新好的依赖内部依然是 webpack@4呢。
npm list webpack@4
因为下载依赖时，会兼容其他依赖包的依赖，使其能够在多个依赖包的相同依赖区间之间进行平衡。版本协商（version resolution） 和依赖提升（hoisting） 机制。
第四步 解决残余未升级的依赖
以 svg-sprite-loader@5.1.1 举例，它依赖了 html-webpack-plugin@3.2.0；而 html-webpack-plugin@3.2.0 依赖 webpack@1-2-3-4 。查找 html-webpack-plugin 依赖为 webpack@5 的版本。查找 svg-sprite-loader 依赖 html-webpack-plugin@? 的版本。 ?= webpack@5 的 html-webpack-plugin 版本
npm show html-webpack-plugin@3 peerDependencies
npm show html-webpack-plugin@4 peerDependencies
npm i svg-sprite-loader@6
