npm几个实用命令

前言

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

实用命令

npm install package@version

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

符号	示例	允许的版本范围	核心场景
无符号	1.4.2	仅 1.4.2	版本敏感，禁止任何更新
^（插入号）	^1.4.2	1.4.2 → 1.9.9（主版本不变）	日常依赖，自动更功能/修复
~（波浪号）	~1.4.2	1.4.2 → 1.4.9（仅修订号更新）	保守更新，仅接受 bug 修复
>/<	>=1.4.2 <3.0.0	1.4.2 → 2.9.9	精确控制版本区间
*（星号）	1.*	1.0.0 → 1.999.999	无版本依赖（极少用）
!（感叹号）	>=1.4.0 !1.4.2	1.4.0、1.4.1、1.4.3+（排除 1.4.2）	禁止有问题的版本

如果你使用普通的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的时候有没有发现其它的一些好用的但是使用不太高频的功能，期待你的留言分享，一起学习一起进步