如何在前端项目中看出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:忽略可选依赖  忽略可选依赖,只显示必需的依赖
相关推荐
萌萌哒草头将军4 分钟前
Rspack 1.5 版本更新速览!🚀🚀🚀
前端·javascript·vue.js
阿卡不卡8 分钟前
基于多场景的通用单位转换功能实现
前端·javascript
♡喜欢做梦19 分钟前
jQuery 从入门到实践:基础语法、事件与元素操作全解析
前端·javascript·jquery
flyliu23 分钟前
前端权限控制应该怎么做
前端·前端工程化
酸菜土狗26 分钟前
gitignor配置禁止上传文件目录到 Git
前端·javascript
小猪猪屁26 分钟前
告别依赖地狱!Monorepo 打造高效 Vue3 项目体系
前端·前端框架
前端老爷更车27 分钟前
深度解析VUE3 Composition API 中的setup 函数
前端
王六岁28 分钟前
JavaScript 运算符的那些"坑"与技巧
前端·javascript
酸菜土狗28 分钟前
nvm常用命令行操作
前端·javascript
Danny_FD30 分钟前
解决 null byte is not allowed in input:PNPM/npm 下载报错的编码陷阱
前端·程序员