接到个项目需要,要求node版本10.x【一听真的好搞笑】的情况下使用vue3。
显然不可能用vite去创建项目了,支持node10的vite版本【0.20.x】可以追溯到4年前vite刚出世的时候,稍微稳定的版本都要node12.x了。既然vite不行,webpack行不行呢?
具体怎么创建省略...
创建完后的package.json,项目正常使用
js
// ... 省略
"dependencies": {
"vue": "^3.2.47",
"vue-router": "^4.2.5",
"vuex": "^4.1.0",
"webpack": "^4.47.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.15",
"@vue/cli-plugin-eslint": "^4.5.15",
"@vue/cli-plugin-typescript": "~4.5.19",
"@vue/cli-service": "^4.5.19",
"vue-loader": "^16.8.3",
"@vue/compiler-sfc": "3.3.4",
},
"overrides": {
"vue-loader": "^16.8.3"
},
本来没什么问题,但是对于vue3.2这个版本之后很多新的特性在项目中无法使用 其中我开发中想要使用到defineComponents,我就没法使用,官方明确指出vue3.3+,于是我把项目的vue升级到 3.3.4这个版本
本来好好的,升级后更直接原地爆炸,意思是@vitejs/plugin-vue需要大于 3.2.13这个版本或 @vue/compiler-sfc 出现在依赖项树中,这不是已经安装了 @vue/compiler-sfc,而且版本是3.3.4,没什么问题啊。
中间绕了好久最终发现问题在 @vue/cli-service身上,它里面有个依赖
"vue-loader": "^15.9.2",
,这个版本依赖的vue是"vue": "^2.5.16",
,但是我手动安装了vue-laoder版本,还是不行。最终把@vue/cli-service升级到5.0.8,这下应该没什么问题了吧,执行启动直接说node版本不支持@vue/cli-service@5.0.8需要的版本node是12 或 14以上
有没有版本可以支持node10,手动修改 engines,或者通过补丁的方式
以下是同创建补丁的具体步骤
使用patch-package
工具可以在安装包之后对node_modules
中的文件进行持久修改,并在每次安装依赖时自动应用这些修改。下面是具体实现步骤:1. 安装
patch-package
和postinstall-postinstall
首先,你需要安装
patch-package
和postinstall-postinstall
作为开发依赖:
luabash 复制代码 npm install patch-package postinstall-postinstall --save-dev
2. 修改
@vue/cli-service
的package.json
找到并修改你想要修改的包的文件。在你的情况中,是
node_modules/@vue/cli-service/package.json
中的engines
字段。
打开
node_modules/@vue/cli-service/package.json
。修改
engines
字段以包含你的 Node.js 版本。例如:
jsonjson 复制代码 "engines": { "node": "^10.0.0 || ^12.0.0 || >= 14.0.0" }
3. 生成补丁文件
修改完成后,运行
patch-package
来生成补丁文件。这个文件会记录你的所有更改,以便在之后自动应用。
javabash 复制代码 npx patch-package @vue/cli-service
这会在你的项目根目录下创建一个
patches/
目录,其中包含@vue/cli-service+<version>.patch
文件。4. 配置
postinstall
脚本为了确保在每次运行
npm install
时应用补丁,你需要在package.json
中添加一个postinstall
脚本:
jsonjson 复制代码 "scripts": { "postinstall": "patch-package" }
如果你使用的是 Yarn,还需要添加一个额外的
postinstall
脚本来避免 Yarn 安装后自动删除node_modules
中的修改:
jsonjson 复制代码 "scripts": { "postinstall": "patch-package", "postinstall-postinstall": "patch-package" }
5. 使用和管理补丁
以后每次你安装或更新依赖时,补丁文件都会自动应用到相应的包上。
- 注意补丁文件 :如果你更新了
@vue/cli-service
,可能需要重新生成或修改补丁文件。- 版本控制 :将
patches/
目录添加到版本控制系统中,以确保其他开发者也能应用这些补丁。例子
以下是一个完整的例子:
修改
package.json
:修改后的
@vue/cli-service
package.json
文件可能如下所示:
perljson 复制代码 { "name": "@vue/cli-service", "version": "4.5.19", "engines": { "node": "^10.0.0 || ^12.0.0 || >= 14.0.0" }, ... }
生成补丁:
运行
npx patch-package @vue/cli-service
生成补丁。配置
package.json
:添加
postinstall
脚本到你的项目package.json
:
jsonjson 复制代码 { "scripts": { "postinstall": "patch-package" }, "devDependencies": { "patch-package": "^6.4.7", "postinstall-postinstall": "^2.1.0" } }
这样,你就可以在不修改
@vue/cli-service
包源码的情况下覆盖其engines
设置。很不幸人家要node12以上是有道理的
如果没有node10 的限制,完全可以把 @vue/cli-service升级到5.0.8,vue升级到3.3,很可惜,只能选择放弃,不过好歹有收获,了解下依赖之间的关系吧