npm几个实用命令

前言

最近接到公司安全团队的项目风险表格,列出了当前前端项目的一些安全风险,大概有190多项,第一个大坨是XSS的,第二大坨就是npm包需要升级的,看了下,需要升级的大概有55个包,最近在做这些包升级的时候发现了NPM以前很少用,但是确很实用的几个命令,特记录分享

实用命令

npm install package@version

此命令相对其它要介绍的几个命令应该是使用率算高的,它的功能就是指定安装特定的版本先来看一下package.json版本规则符号对比表:

如果你使用普通的npm install package,那它在package.json里写入的版本规则是第二项,如项目有lock文件的时候问题不大,但是没有的时候,你执行npm i,它会在可允许的范围内主动更新版本,如果你使用npm install package@version,那写入package.json的版本规则会是第一种,此次安全团队给出了要更新到的指定版本,所以在此处我选择的通过npm install package@version来实现安装指定版本并锁死版本号使用示例:

复制代码
npm install sass@1.94.2

npm ls package [--depth=0]

此命令用于查看你当前项目安装的package版本是多少,它会列出安装的所有的版本,此处我们以vue包为例,执行如下命令

复制代码
npm ls vue

控制台会看到如下输出结果:

从上图我们还看到部分包后还带有deduped的灰色字,这个的意思是"去重" 的意思,是 de-duplicated 的缩写,代表这个包是 "重复依赖被合并后,复用了已安装的版本",核心是 npm 优化依赖树的一种机制,当项目中多个依赖同时需要同一个包(且版本兼容)时,npm 会自动把重复的包合并到依赖树的更上层(比如根目录的 node_modules),避免重复安装。此时在 npm ls 中,被合并的重复包就会标注 deduped,表示 "这个包没单独装,而是复用了其他地方已有的版本"上面命令还有一个可选参数就是--depth,控制依赖树的显示层级,避免默认npm ls输出过于冗长,用的不多,看二个例子:

  • npm ls vue --depth=0 只显示项目直接依赖(不显示子依赖)

  • npm ls vue --depth=1 显示直接依赖 + 一级子依赖

npm explain package

精准解释某个包被安装的原因(谁依赖它、依赖版本范围、安装路径),解决「明明没手动安装,却出现在node_modules」的困惑,个人感觉这个命令和上面ls有一点相似,都可以查看当前包安装了什么版本,哪一个版本被安装是因为哪一个依赖,我们还是以vue包来例

复制代码
npm explain vue

在命令行看到如下结果:

npm view package [version[s]]

此命令就是查看package包线上可用的版本,分带versiont和不带version,version又有分带不带s,

  • 不带version,从npm官方仓库(或当前配置的镜像源)中查询vue包的公开信息

  • 带version,并且带s就是列出所有可用历史版本

  • 带version,不带s就是当前最新的稳定可用版本

    此处我们还是以vue包为例:

    npm view vue

控制台输出如下:

此命令还可以指定版本号,使用方式是npm view vue@version,就是查看指定版本的公开信息,这个命令给我的感觉就是在命令行中打开vue包的npm简版详情页

复制代码
npm view vue versions

控制台会看到如下输出结果:

如果不带s,控制台输出如下:

npm view package[@version] dependencies [--json]

此命令就是上面npm view的另一种用法,它可以查看当前包当指版本的生产依赖和开发依赖,为什么单提出来说了,因为这个是我这一次用的最多的命令,因为安全团队给的需要你做升级的包里,它并不是当前项目的直接依赖,很多都是二级或者三级依赖,如果你要升三级依赖,那你就得去查看祖先级包哪一个版本可以让你这个依赖升级,单提出来的另一个原因是它还有一个在线web工具此处我们还是以vue包为例:

复制代码
npm view vue dependencies --json

命令行输出如下:

它有在线版本:++https://npmgraph.js.org/++使用体验如下:

一开始我是使用上在命令行查看的,后面发现这个在线的工具后,就使用的都是这个在线的工具了,顺便说个题外话,如果同样的功能可以通过cli来用,也可以通过GUI来用,你通常会选择哪一个来用了?当然,我是后者,你了?

小结

对于做前端开发的我们基本每天都有在用NPM命令,但是还是有很多好用的功能是没有发现的,所以我一直都很敬畏技术,就像我写个人简历我觉得我自己掌握了的技术我敢用的二个字就是熟练,从来不敢用精通,因为精通一个东西真的不是那么容易的个人的知识和能力是有限度,你在使用npm的时候有没有发现其它的一些好用的但是使用不太高频的功能,期待你的留言分享,一起学习一起进步

文章转载自: ++!win !++

原文链接: https://www.cnblogs.com/xwwin/p/19321390

体验地址: http://www.jnpfsoft.com/?from=001YH

相关推荐
ywf12152 小时前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
恋猫de小郭2 小时前
2026,Android Compose 终于支持 Hot Reload 了,但是收费
android·前端·flutter
hpoenixf8 小时前
2026 年前端面试问什么
前端·面试
还是大剑师兰特8 小时前
Vue3 中的 defineExpose 完全指南
前端·javascript·vue.js
泯泷8 小时前
阶段一:从 0 看懂 JSVMP 架构,先在脑子里搭出一台最小 JSVM
前端·javascript·架构
mengchanmian9 小时前
前端node常用配置
前端
华洛9 小时前
利好打工人,openclaw不是企业提效工具,而是个人助理
前端·javascript·产品经理
xkxnq9 小时前
第六阶段:Vue生态高级整合与优化(第93天)Element Plus进阶:自定义主题(变量覆盖)+ 全局配置与组件按需加载优化
前端·javascript·vue.js
A黄俊辉A10 小时前
vue css中 :global的使用
前端·javascript·vue.js
小码哥_常10 小时前
被EdgeToEdge适配折磨疯了,谁懂!
前端