如何检查前端项目中未使用的依赖包?

简介: 如何检查前端项目中未使用的依赖包?

随着前端项目中使用的依赖包越来越多,而其中一部分依赖包可能并未被项目所使用,手动查找这些依赖包既耗时又繁琐。那么,有没有工具能够快速地帮助我们识别和清理项目中未使用的依赖包呢?本文将介绍两个常用的工具来简化这一过程!


depcheck


Depcheck 是一款用于分析项目中依赖关系的工具,它可以帮助我们找出以下问题:在 package.json 中,每个依赖包如何被使用、哪些依赖包没有用处、哪些依赖包缺失。它是解决前端项目中依赖包清理问题的一个常用工具。

Depcheck 不仅可以识别 JavaScript 文件中的依赖关系,还支持以下语法:

  • JavaScript (ES5、ES6 和 ES7)
  • React JSX
  • CoffeeScript
  • TypeScript(需要安装 typescript 依赖)
  • SASS 和 SCSS
  • Vue.js(需要安装 @vue/compiler-sfc 依赖)

可以在终端中运行一下命令来安装 depcheck(需要确保 node.js 的版本大于等于 10.0.0):

shell

复制代码

npm install -g depcheck

在安装时,报了以下错误:

999.webp.jpg

问题很明显就是权限不够(笔者的电脑是 M1 MacBook,这里以 mac 的操作为例),问了一下 chatgpt,给出的解答如下:

990.webp.jpg

这里使用最简单的第一种方案来解决,使用管理员权限来安装:

shell

复制代码

sudo npm install -g depcheck

这样就安装成功了。接下来在前端项目的根目录下执行以下命令:

shell

复制代码

depcheck

可以看到以下没有被引用的依赖包以及缺少依赖的文件:

120.webp.jpg

当然,这些依赖并不一定是真的没用到,比如 less、less-loader、file-loader、svgo、TypeScript 等都在项目或者 webpack 等配置中用到了,depcheck 会忽略这些包。实际上,depcheck 会忽略这些配置文件中使用到的依赖项。

depcheck 的基本语法如下:

shell

复制代码

depcheck [directory] [arguments]

其中,directory 是项目根目录(即 package.json 文件所在的目录)。如果未指定,默认为当前目录。所有参数都是可选的:

  • --ignore-bin-package=[true|false]:表示 depcheck 是否忽略包含 bin 入口的包。默认值为 false。
  • --skip-missing=[true|false]:表示 depcheck 是否跳过计算缺失的依赖项。默认值为 false。
  • --json:以 JSON 格式输出结果。当未指定时,depcheck 会以友好的格式输出。
  • --oneline:将结果作为用空格分隔的字符串输出。用于复制/粘贴很有用。
  • --ignores:一个由逗号分隔的数组,包含要忽略的包名称。它可以是 glob 表达式。例如,--ignores="eslint,babel-*"
  • --ignore-dirs:已过时,请改用 ignore-patterns。一个由逗号分隔的数组,包含要忽略的目录名称。例如,--ignore-dirs=dist,coverage
  • --ignore-path:指定包含描述要忽略的文件的模式的文件的路径。文件必须符合 .gitignore 规范。例如,--ignore-path=.eslintignore
  • --ignore-patterns:用逗号分隔的描述要忽略的文件的模式。模式必须符合 .gitignore 规范。例如,--ignore-patterns=build/Release,dist,coverage,*.log
  • --help:显示帮助信息。
  • --parsers--detectors--specials:这些参数用于高级用途。它们提供了一种易于定制文件解析器和依赖项检测的方法。。
  • --config=[文件名]:一个外部配置文件(见下文)。

例如,想忽略某些包或文件夹,可以在命令后面添加相应的选项:

shell

复制代码

depcheck --ignores="eslint" --ignore-dirs="dist"

除此之外,我们还可以在项目中增加 depcheck 的配置文件来配置要忽略解析的文件、要解析的文件、要忽略的包等,可以查看官方的文档来进行配置。

Github:github.com/depcheck/de…

npm-check

npm-check 用于检查项目中的依赖项,并提供有关过期,未使用和缺少依赖项的信息。npm-check 是基于 depcheck 实现的。它可以提示项目依赖项的状态,但它只会检查并更新项目的直接依赖项,并不会检查和更新嵌套的依赖项(即项目的依赖项的依赖项)

npm-check 具有以下特性:

  • 告诉哪些内容已经过期。
  • 提供包的文档链接,以便决定是否要更新。
  • 提醒代码中没有使用某个依赖项。
  • 通过 -g 支持全局安装的包。
  • 通过 -u 提供交互式更新,减少输入和拼写错误。
  • 支持公有和私有的 @scoped/packages。
  • 支持 ES6 风格的 import from 语法。
  • 使用安装的版本的 npm 进行模块升级,包括新的 npm@3,以确保依赖项到达预期的位置。
  • 适用于任何公共的 npm 注册表、私有注册表以及类似 Sinopia 的备用注册表。
  • 在 package.json 中设置 private: true 的包不会在注册表中查询。
  • 为命令行应用添加了表情符号。
  • 适用于 npm@2 和 npm@3,以及一些新的替代安装程序,例如 ied 和 pnpm。

可以在终端中通过以下命令来安装 npm-check(需要确保 node.js 的版本大于等于 10.9.0):

shell

复制代码

npm install -g npm-check

安装时同样遇到了权限的问题,这里也使用管理员权限来安装:

shell

复制代码

sudo npm install -g npm-check

接下来就可以执行以下命令来检测项目的 npm 包:

shell

复制代码

npm-check

执行完之后,就可以看到类似的结果:

33334.webp.jpg

这里面会详细介绍每个 npm 的情况,可以根据实际情况进行分析。

npm-check 的基本语法如下:

shell

复制代码

npm-check <path> <options>

其中 path 是要检查的路径。默认为当前目录。可以使用 -g 检查全局模块。

除此之外,还有以下选项:

  • -u, --update 交互式更新。
  • -y, --update-all 非交互式更新。无需提示即应用所有更新。
  • -g, --global 查看全局模块。
  • -s, --skip-unused 跳过未使用的软件包检查。
  • -p, --production 跳过 devDependencies。
  • -d, --dev-only 仅查看 devDependencies(跳过 dependencies)。
  • -i, --ignore 根据成功的 glob 忽略依赖项。
  • -E, --save-exact 在 package.json 中保存精确版本(x.y.z),而不是 caret (^x.y.z)。
  • --specials depcheck 特殊功能列表,用于检查未使用的依赖项。
  • --no-color 强制启用或禁用颜色输出。
  • --no-emoji 去除表情符号支持。CI 环境默认没有表情符号。
  • --debug 显示调试输出,报告 github 上的问题时,请添加到 gist 中。

除此之外,npm-check 也像 depcheck 一样,支持在项目根目录添加配置文件来进行配置,可以查看官方的文档来进行配置。

Github:github.com/dylang/npm-…

相关文章
|
2月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
122 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
11天前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
43 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
1月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
165 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
17天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
49 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
2月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
89 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
26天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
49 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
135 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
2月前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
97 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
2月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
41 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
2月前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
34 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章

  • 1
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    VSCode AI提效工具,通义灵码前端开发体验
  • 8
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 9
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
  • 10
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex