node_modules 是该好好治一治了

大家好,我是 ConardLi

作为前端开发者,大家有没有被 node_modules 困扰过呢?

反正我是有。。。因为 npm 特殊的包管理机制,往往一个很小的项目就会携带一个很大的 node_modules 。相信大家都刷到过下面这张图,这就是对前端依赖最大的讽刺了。😂

89cb31ae8a2093889a6cec15ee81c562.png

有时候,可能不经意间我们就会引入一个意外的依赖包,或者不小心升级了一个有 break chage 的依赖,还有可能在一个项目中安装了多个互相冲突的依赖版本。但是每次遇到这种问题,想要排查问题都要花费大量时间。

比如,我们想查询一个依赖在项目中的安装情况,我们可能会使用 npm ls 命令,但是这个命令实在是太慢了,而且打印出来的信息而且混乱。

或者直接去 lock 里面检查版本?你可能要花费更多的时间,而且不一定能找全。

qnm

最近在逛 Github 发现了一个宝藏 CLI 工具:qnm,它可以帮助我们快速梳理前端依赖信息,并且同时支持 npmyarn

fd589d9f2fc81d2965442e4ea39c3543.png

我们可以把它安装到全局,或者使用 npx 调用:

npm i --global qnm

分析依赖

用法:qnm [module], 我们尝试查看下所有安装的 lodash

ea51a7a30509ac84ba3683fe21ac818b.png

这意味着, lodash 在我们的项目里被安装了 15 次,我们项目直接依赖的版本是 4.17.11,发布于 3 年前(已经很落后了),其他间接依赖的都是 4.17.21 版本,发布于 1 周前。

我们来对比下实际的 node_modules 目录,发现是可以一一对应上的:

ad26754829fa4442ed9913972e9a6d2a.png

再来对比下 npm ls lodash 的结果,相比之下这个真的很慢而且展示比较乱:

541f0b102a871443a274d6e25e8817df.png

你还可以对包进行模糊搜索(直接在命令行输入 qnm):

0a76560f9a3afe10a453574d1a856e85.gif

另外,还有一些参数选项:

  • --no-remote:禁止从 npm 获取远程数据,可以加快命令速度;

  • -o , --open:使用默认编辑器打开模块的 package.json 文件;

  • -d, --debug:查看完整的错误消息,主要用于调试;

  • --disable-colors:禁用大部分颜色和样式,例如版本颜色。

分析空间占用

你可以使用 qnm doctor 分析 node_modules 目录中占用最多空间的内容,这个一分析还是挺让我吃惊的,有的老项目 node_modules 已经占用了几个 G 的空间了。。

799fec70f648ca9b4cc608140d486cc6.png

调用 qnm doctor --sort duplicates 查看重复依赖占用的空间:

6c5bfd00e9d655dd2e9b0513746e50c8.png

分析所有模块

调用 qnm list 命令分析 node_modules 目录中所有模块(等同于直接调用 npm ls ,但是要比它的速度和可读性好太多了)。

5d026019337ea0e316ba79d7bebb241a.png

模糊匹配

qnm match 命令类似于 grep 命令,可以匹配包含某字符串的任何模块。

比如我们想查找我们装了哪些 babel 插件:

ebd4f5530124f482261c9a58cf8fb540.png

怎么样,有了这个命令行工具是不是感觉治理 node_modules 要轻松一些了?赶紧收藏起来吧(https://github.com/ranyitz/qnm)!

如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:

  1. 点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)

  2. 欢迎加我微信「huab119」拉你进前端技术/码农健身 群,长期交流学习...

    关注公众号「前端劝退师」,持续为你推送精选好文,也可以加我为好友,随时聊骚。

fddee03420174ccf61a6ca1c48732c0c.png

点个在看支持我吧,转发就更好了

如果觉得这篇文章还不错,来个【转发、收藏、在看】三连吧,让更多的人也看到~

94d83c200c198e85fc0d5d0dc0e2a3d1.jpeg

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值