一文搞懂vue的依赖之间的关系

接到个项目需要，要求node版本10.x【一听真的好搞笑】的情况下使用vue3。

显然不可能用vite去创建项目了，支持node10的vite版本【0.20.x】可以追溯到4年前vite刚出世的时候，稍微稳定的版本都要node12.x了。既然vite不行，webpack行不行呢？

具体怎么创建省略...

创建完后的package.json，项目正常使用

// ... 省略
 "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 作为开发依赖：

bash
复制代码
npm install patch-package postinstall-postinstall --save-dev

2. 修改 @vue/cli-service 的 package.json

找到并修改你想要修改的包的文件。在你的情况中，是 node_modules/@vue/cli-service/package.json 中的 engines 字段。

1. 打开 node_modules/@vue/cli-service/package.json。

2. 修改 engines 字段以包含你的 Node.js 版本。例如：

   json
   复制代码
   "engines": {
     "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
   }

3. 生成补丁文件

修改完成后，运行 patch-package 来生成补丁文件。这个文件会记录你的所有更改，以便在之后自动应用。

bash
复制代码
npx patch-package @vue/cli-service

这会在你的项目根目录下创建一个 patches/ 目录，其中包含 @vue/cli-service+<version>.patch 文件。

4. 配置 postinstall 脚本

为了确保在每次运行 npm install 时应用补丁，你需要在 package.json 中添加一个 postinstall 脚本：

json
复制代码
"scripts": {
  "postinstall": "patch-package"
}

如果你使用的是 Yarn，还需要添加一个额外的 postinstall 脚本来避免 Yarn 安装后自动删除 node_modules 中的修改：

json
复制代码
"scripts": {
  "postinstall": "patch-package",
  "postinstall-postinstall": "patch-package"
}

5. 使用和管理补丁

以后每次你安装或更新依赖时，补丁文件都会自动应用到相应的包上。

• 注意补丁文件 ：如果你更新了 @vue/cli-service，可能需要重新生成或修改补丁文件。
• 版本控制 ：将 patches/ 目录添加到版本控制系统中，以确保其他开发者也能应用这些补丁。

例子

以下是一个完整的例子：

1. 修改 package.json：

   修改后的 @vue/cli-service package.json 文件可能如下所示：

   json
   复制代码
   {
     "name": "@vue/cli-service",
     "version": "4.5.19",
     "engines": {
       "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
     },
     ...
   }

2. 生成补丁：

   运行 npx patch-package @vue/cli-service 生成补丁。

3. 配置 package.json：

   添加 postinstall 脚本到你的项目 package.json：

   json
   复制代码
   {
     "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，很可惜，只能选择放弃，不过好歹有收获，了解下依赖之间的关系吧