如何在前端项目中看出node_modules中的库是一个可选依赖库

最近在vue2升级vue3，很多依赖库都要升级，项目起不起来

错误信息：

javascript 复制代码

vue-composition-api.mjs:375 Uncaught (in promise) Error: [vue-composition-api] No vue dependency found.

这玩意不是项目中业务代码的报错，不知道如何解决

大佬一顿排查，在package-lock.json寻找其依赖关系，发现@antv/x6-vue-shape、vue-demi 这两个库用到了@vue/composition-api 最终解决：直接将node-modules中的@vue/composition-api给删掉了，说因为这个库是可选依赖库，所以删掉试试，果然就可以了，报错解决

在前端项目中，可以通过以下几种方式判断 node_modules 中的库是否为可选依赖库：

1 查看 package.json 文件

可选依赖库通常会在项目的 package.json 文件中被定义在 optionalDependencies 字段中

javascript 复制代码

{
  "optionalDependencies": {
    "optional-library": "^1.0.0"
  }
}

2 检查依赖的安装行为

在安装依赖时，可选依赖可能会因为某些条件未满足而未被安装，但不会导致安装失败。可以通过以下方式观察

使用 npm install --omit=optional 命令安装项目依赖时，会跳过可选依赖。

查看安装日志，可选依赖在未安装时会显示为 extraneous。

3 检查依赖的元数据

某些依赖库可能在其自身的 package.json、package-lock.json 中定义了 peerDependenciesMeta 字段，并将依赖标记为可选。例如：

javascript 复制代码

{
  "peerDependenciesMeta": {
    "optional-library": {
      "optional": true
    }
  }
}

4 使用依赖查询工具

使用 npm 提供的依赖查询工具来识别可选依赖。例如：

使用 npm ls 命令查看依赖树，结合 --depth 参数可以更清晰地看到依赖关系。

使用 npm query 命令，结合选择器 .optional 来筛选可选依赖。

1、指定依赖深度，使用 --depth 参数可以指定显示的依赖层级深度

javascript 复制代码

npm ls --depth=0  // 这会只显示项目的直接依赖，不显示间接依赖

javascript 复制代码

npm ls --depth=1   // 这会显示直接依赖及其第一层间接依赖。
npm ls --depth=Infinity // 显示所有层级的依赖

2、查看特定依赖

只想查看某个特定依赖及其子依赖，可以在命令后面加上依赖名称

javascript 复制代码

npm ls <package-name> --depth=2 // 显示指定依赖及其两层子依赖

3、结合其他参数

javascript 复制代码

npm ls --depth=1 --json // 以 JSON 格式输出依赖树
npm ls --prod --depth=1 // --prod 或 --omit=dev：仅显示生产环境依赖 忽略 devDependencies，只显示生产环境的依赖
npm ls --dev --depth=1  // --dev 或 --omit=prod：仅显示开发环境依赖  忽略生产环境依赖，只显示开发环境的依赖
npm ls --omit=optional --depth=1 // --omit=optional：忽略可选依赖  忽略可选依赖，只显示必需的依赖