如何在前端项目中看出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:忽略可选依赖  忽略可选依赖,只显示必需的依赖
相关推荐
夕水15 分钟前
这个提升效率宝藏级工具一定要收藏使用
前端·javascript·trae
会飞的鱼先生29 分钟前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js
斯~内克43 分钟前
前端浏览器窗口交互完全指南:从基础操作到高级控制
前端
Mike_jia1 小时前
Memos:知识工作者的理想开源笔记系统
前端
前端大白话1 小时前
前端崩溃瞬间救星!10 个 JavaScript 实战技巧大揭秘
前端·javascript
loveoobaby1 小时前
Shadertoy着色器移植到Three.js经验总结
前端
蓝易云1 小时前
在Linux、CentOS7中设置shell脚本开机自启动服务
前端·后端·centos
浩龙不eMo1 小时前
前端获取环境变量方式区分(Vite)
前端·vite
土豆骑士2 小时前
monorepo 实战练习
前端
土豆骑士2 小时前
monorepo最佳实践
前端