如何在前端项目中看出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:忽略可选依赖  忽略可选依赖,只显示必需的依赖
相关推荐
Mintopia1 小时前
架构进阶 🏗 从 CRUD 升级到“大工程师视野”
前端·javascript·全栈
Mintopia1 小时前
小样本学习在 WebAI 场景中的技术应用与局限
前端·人工智能·aigc
光影少年1 小时前
vue生态都有哪些?
前端·javascript·vue.js
一只大头猿1 小时前
基于SpringBoot和Vue的超市管理系统
前端·vue.js·spring boot
用户1456775610371 小时前
告别繁琐操作!Excel合并原来可以这么轻松
前端
itslife2 小时前
vite 源码 - 创建 ws 服务
前端·javascript
懒人Ethan2 小时前
解决一个C# 在Framework 4.5反序列化的问题
java·前端·c#
用户1456775610372 小时前
Excel合并数据太麻烦?这个神器3秒搞定,打工人必备!
前端
西洼工作室2 小时前
前端混入与组合实战指南
前端
YQ_ZJH3 小时前
Spring Boot 如何校验前端传递的参数
前端·spring boot·后端