一、显示npm install 详细信息

按照如下设置后，可以在npm install 后查看每一个步骤，方便查看安装的详细信息，对出现异常情况排查原因非常有用，比如，可以清楚的知道安装某个包时具体卡在什么环节等。

1、显示info级别信息

推荐设置这个级别就可以了
npm config set loglevel info

image.png

2、显示verbose级别信息

这个级别比info级别更详细
npm config set loglevel verbose

image.png

3、显示其他级别信息

https://docs.npmjs.com/misc/config#loglevel

image.png

二、查看项目某个库或所有库的版本号及依赖关系

1、查看某个库的版本号及依赖关系
npm ls 包名

//  查看 base64-js版本及依赖关系
npm ls base64-js

image.png

2、查看项目所有库版本及依赖关系

// 查看所有依赖的版本(当前项目)
npm ls
// 查看所有依赖的版本(全局 非当前项目)
npm ls -g
// 查看所有一级依赖的版本
npm ls --depth 0  或 npm ls --depth=0
// 查看所有一级依赖及二级依赖的版本
npm ls --depth=1 或 npm ls --depth 1
// 查看所有三级依赖及三级依赖的版本
npm ls --depth=3 或 npm ls --depth 3

image.png

3、查看项目dependencies或devDependencies所有库版本及依赖关系

// 查看所有dependencies一级依赖的版本
npm list -depth 0 -prod true
// 查看所有devDependencies一级依赖的版本
npm list -depth 0 -dev true

三、库版本解释

image.png

库版本解释 截图自： 2018 年了，你还是只会 npm install 吗？

四、锁定库版本

1、通过prefix控制（信息来源：npm-shrinkwrap锁定依赖）

当运行 npm update 时，

• a、^1.5.1 【限制主版本号】允许安装版本号大于 1.5.1 但小于 2.0.0 版本的模块
  npm默认采用这种方式

• b、~1.5.1 【限制次要版本】 允许安装版本号大于 1.5.1 但小于 1.6.0 版本的模块
  可通过 npm config set save-prefix="~"将默认的^修改为~

• c、1.5.1 【精确控制】允许安装版本号大于 1.5.1
  可通过npm config set save-exact true 将默认的^取除掉

在此个人推荐采用~1.5.1的方式；

2、通过package-lock.json控制

npm 5.0+ 后 npm install时会自动创建package-lock.json文件；package-lock.json的出现，npm install规则发生了三次变化：（信息来源: npm install 生成的package-lock.json是什么文件？有什么用？）

• a、 npm 5.0.x版本
  不管package.json怎么变化，npm install 都会根据package-lock.json 文件下载；

• b、 npm 5.1.0+版本
  npm install会无视package-lock.json， 根据package.json下载，也就是package.json的权限会高于package-lock.json；

• c、 npm 5.4.2+版本
  npm install时 如果package.json与package-lock.json不一致，则根据package.json的语法规则进行下载；如果一致时，则都会根据package-lock.json下载；

• 补充知识 : npx 是在npm 5.2.0+版本支持的 http://www.ruanyifeng.com/blog/2019/02/npx.html

3、通过shrinkwrap控制 （信息来源：npm-shrinkwrap锁定依赖）

• 步骤1、如果不能保证package.json文件定义的依赖与node_modules下已安装的依赖是匹配、无冗余的，建议执行 清理依赖并重新安装（rm -rf node_modules && npm install ）或者精简依赖--移除无关的包(npm prune )

• 步骤2、npm shrinkwrap 运行后，如果原来有package-lock.json文件的，将单纯的重命名为npm-shrinkwrap.json

• 步骤3、npm install 后，记得运行 npm shrinkwrap 以便更新npm-shrinkwrap.json文件

也就是使用shrinkwrap控制库版本时需要执行三条命令；

package-lock.json与npm-shrinkwrap.json的作用类似，但是区别如下：

a、如果根目录下同时存在这两个文件，则以npm-shrinkwrap.json为准；
b、npm-shrinkwrap.json在npm v2、npm v3、npm v4 就已经支持了，但是package-lock.json 仅在npm v5+及以后才支持；
c、npm-shrinwkrap.json 可以被包含到发布包，而 package-lock.json 不行，保证用户可以自由管理依赖包；

4、弃用npm，采用yarn；

五、查看npm配置信息

1、查看简要信息 npm config list

image.png

2、查看所有信息 npm config list -l

六、清除npm包缓存

1、删除 node_modules及package-lock.json；
2、执行 npm cache clean --force 删除所有缓存 （其实清的是 ~/.npm/_cacache文件夹中的数据-https://github.com/sliwey/blog/issues/1），如果你本地有多个项目，不是很推荐这种做法(因为可能其他项目可能用到了这里面的缓存了) 推荐采用下面一点 七、某个项目不使用npm公共缓存

七、某个项目不使用npm公共缓存

1、先查看该项目的npm缓存目录在哪里
可以通过npm config get cache查看当前npm的缓存在哪里；下图说明在npm公共缓存目录中

image.png

2、在该项目根目录下创建.npmrc文件，并在该文件中写入

cache=.npm

3、确认npm缓存目录在哪里，如下图这么显示说明成功了

image.png

参考：http://claude-ray.com/2019/12/06/npm-install-without-cache/

八、使用淘宝镜像

这个大家应该都知道，不解释了

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm config set registry https://registry.npm.taobao.org 设置淘宝镜像

npm config set registry https://registry.npmjs.org/ 设置原始npm源

推荐安装使用nrm来管理源

九、npm 其他知识

1、升级npm
npm install npm@latest -g
2、使用npx 执行某个插件 (如果项目中没有，则安装最新的插件)
npx uglify-js -v
npx uglify-js -m -- test.js >>yasuo.js
npx webpack -v
npx node@10 -v npx node@12 -v 可以避免使用nvm之类的工具
3、npm install xx -g 后安装目录可以通过 npm root -g查看。例如 Windows上的为 C:\Users\你的用户名\AppData\Roaming\npm\node_modules
4、查看npm包详细信息 npm view 包名

image.png

5、查看所有可以版本
npm view 包名 versions

image.png

6、查看当前项目可以的新版本npm outdated

image.png

7、查看全局安装的npm包
npm list -g --depth 0

+-- @vue/cli@4.5.12
+-- browser-sync@2.26.13
+-- browserify@17.0.0
+-- cnpm@6.1.1
+-- conventional-changelog@3.1.24
+-- conventional-changelog-cli@2.1.1
+-- documentation@13.2.5
+-- f2elint@1.2.0
+-- gulp@4.0.2
+-- jsdoc@3.6.7
+-- lerna@4.0.0
+-- mp-cli-lc@3.0.1
+-- mrm@2.6.1
+-- nodemon@2.0.6
+-- nrm@1.2.1
+-- pm2@4.5.5
+-- rimraf@3.0.2
+-- rollup@2.53.1
+-- spy-debugger@3.8.6
+-- ts-node@10.0.0
+-- typescript@4.3.2
+-- verdaccio@4.12.0
+-- whistle@2.5.30
standard-version

image.png

8、如果安装的模块依赖了c++，则安装过程中会隐性安装node-gyp，node-gyp可以编译这些依赖c++模块的模块，但是node-gyp在首次编译时会依赖node源码，所以又会去悄悄去下载node，虽然安装时设置了淘宝镜像，但是此时是无效的，可以使用 disturl 来解决 npm config set disturl https://npm.taobao.org/mirrors/node/
9、node-sass安装时会从github上下载一个叫binding.node的文件，而github releases里的文件都托管在亚马逊的服务器上，导致国内无法访问，因此可以使用 sass_binary_site 来解决 npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/，类似的情况还有很多:

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set sharp_dist_base_url https://npm.taobao.org/mirrors/sharp-libvips/
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set puppeteer_download_host https://npm.taobao.org/mirrors/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
npm config set sentrycli_cdnurl https://npm.taobao.org/mirrors/sentry-cli/
npm config set sqlite3_binary_site https://npm.taobao.org/mirrors/sqlite3/
npm config set python_mirror https://npm.taobao.org/mirrors/python/

此外，node-sass版本与node版本相关联：

image.png

使用nvm或n 进行版本切换时，可能会出现binding.node匹配不到的情况，此时可通过

npm cache clean -f
npm rebuild node-sass 或 删除node_modules及package-lock.json 文件重新安装

类似node-sass从国外服务器下载东西还有很多 ，有时需要在Github上克隆一份该模块的源码进行分析，搜索包含base、binary、cdn、config、dist、download、host、mirror、npm、site、url等这样的关键词(自行探索，通常「mirror」的匹配度最高) https://mp.weixin.qq.com/s/u4oI_tdYDIFQeTPSifCt7g#

10、在项目中新增一个重装的指令
rimraf 是一个node版的 rm -rf
npm i -g rimraf

{
  "scripts": {
    "reinstall": "rimraf node_modules &&  rimraf   package-lock.json && npm i"
  }
}

11、依赖相同的包的安装机制
如：A和B包都依赖C，那么C会因npm版本的不同安装至不同的目录。如果npm版本为2及以下，则是

image.png

如果npm版本为3及以上，

image.png

若碰到依赖的版本不同会怎么样呢？
假设A、B 依赖D (v0.0.1)，C依赖D（v0.0.2）：

image.png

如果C的顺序在A，B的前面（npm intsall时 package.json 里依赖的顺序会依次解析）

image.png

推荐看这篇文章：https://www.zoo.team/article/npm-details

12、依赖类型的区别

• a、dependencies
  生成环境及开发环境的依赖
• b、devDependencies
  开发环境依赖
• c、optionalDependencies
  可选的依赖包，(可有可无的依赖)
• d、peerDependencies
  同等依赖，必须先安装某些包，如ant-design@3.x的配置如下

"peerDependencies": { 
  "react": ">=16.9.0", 
  "react-dom": ">=16.9.0" 
 }, 

• e、bundledDependencies
  捆绑依赖包

13、需要修改某个npm包，但不想联系作者修改/发起pull request或者自己下载代码下来修改完后再发布npm

可以使用patch-package npm包，在安装完这个npm包后，在package.json中的script添加"postinstall": "patch-package"，然后修改你想要修改的npm包源码文件(在项目根目录node_modules文件夹里），然后执行npx patch-package 你想要修改的npm包名称，即可。详细步骤请见：使用patch-package定制node_modules 中的依赖包

十、推荐资料

1、[译]npm入门指南
2、npm-shrinkwrap锁定依赖
3、在JavaScript项目中锁定npm依赖包版本
4、 npm 官方文档 https://docs.npmjs.com/cli/v6/commands/npm-ls
5、 中文文档 https://www.npmjs.cn/getting-started/what-is-npm/
6、npm 模块安装机制简介 http://www.ruanyifeng.com/blog/2016/01/npm-install.html
7、手把手教你快速制作基于Element UI组件npm包 https://www.jianshu.com/p/b375e1eb549b

十一、 npm与yarn、pnpm及相关

（一） 由facebook及google支持的yarn

1、查看包引入
有时npm嵌套的太深，我们不知道某个包是怎么引进来的，这时我们可以使用 yarn why <package-name> 来查看它是谁引入的

（二） 由Zoltan Kochan 开发的pnpm

1、为什么现在我更推荐 pnpm 而不是 npm/yarn?
2、Zoltan Kochan--Why should we use pnpm?

（三） node 内置的npm

Node.js 16.9.0 开始内置Corepack，其将默认支持pnpm、yarn包管理器

十二、 推荐网站

1、查看某个npm包被哪个npm包作为依赖引用了，例如handlebars包：
https://cnpmjs.org/package/handlebars

image.png

2、分析某个npm https://npm.devtool.tech/
例如查看cdn： https://npm.devtool.tech/cdn/handlebars

image.png

3、在线运行npm
https://npm.runkit.com/js-utils-lc

image.png

4、查看npm包的源文件
a. https://cdn.jsdelivr.net/npm/js-utils-lc/

image.png

b. https://www.jsdelivr.com/package/npm/js-utils-lc

image.png

c. https://npm.runkit.com/js-utils-lc

image.png

5、查看npm包下载量及对应的github等信息
a. https://openbase.com/js/js-utils-lc
b. https://snyk.io/advisor/npm-package/js-utils-lc

6、 引用最新的cdn
https://unpkg.com/js-utils-lc@latest/

十三、nvm注意事项

1 设置默认版本 nvm alias default v8.9.1
2 查看nvm安装的目录echo $NVM_DIR

十四、gulp v3.9 与Node12不兼容解决方案

使用Node 12 运行gulp 3.9时会报primordials is not defined 错误，可以在package.json加入如下代码解决(https://stackoverflow.com/questions/55921442/how-to-fix-referenceerror-primordials-is-not-defined-in-node-js)

{
  "scripts": {
    "preinstall": "npx npm-force-resolutions"
  },
  "resolutions": {
  "graceful-fs": "^4.2.10"
  }
}

以上亲测有效。(原理是npm-force-resolutions 可以控制依赖的依赖，有点类似yarn的 selective dependency
)
或者（以下方法待验证：https://blog.csdn.net/qq_22713201/article/details/122329418）
1、项目根目录新建npm-shrinkwrap.json
2、npm-shrinkwrap.json内容修改如下：

{
  "dependencies": {
    "graceful-fs": {
        "version": "4.2.2"
     }
  }
}

十五、专门分析npm大小的网站

https://bundlejs.com/

十六、npm下载量对比分析

https://npmtrends.com
例如：/angular-vs-react-vs-vue

image.png