一、顯示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包 http://www.lxweimin.com/p/b375e1eb549b

十一、 npm與yarn、pnpm及相關

（一）由facebook及google支持的yarn

1、查看包引入
有時npm嵌套的太深，我們不知道某個包是怎么引進來的，這時我們可以使用 yarn why <package-name> 來查看它是誰引入的

（二）由Zoltan Kochan 開發的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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

你不一定知道的npm那些知識

你不一定知道的npm那些知識

一、顯示npm install 詳細信息

1、顯示info級別信息

2、顯示verbose級別信息

3、顯示其他級別信息

二、查看項目某個庫或所有庫的版本號及依賴關系

三、庫版本解釋

四、鎖定庫版本

1、通過prefix控制（信息來源：npm-shrinkwrap鎖定依賴）

2、通過package-lock.json控制

3、通過shrinkwrap控制（信息來源：npm-shrinkwrap鎖定依賴）

4、棄用npm，采用yarn；

五、查看npm配置信息

六、清除npm包緩存

七、某個項目不使用npm公共緩存

八、使用淘寶鏡像

九、npm 其他知識

十、推薦資料

十一、 npm與yarn、pnpm及相關

（一）由facebook及google支持的yarn

（二）由Zoltan Kochan 開發的pnpm

（三） node 內置的npm

十二、推薦網站

十三、nvm注意事項

十四、gulp v3.9 與Node12不兼容解決方案

十五、專門分析npm大小的網站

十六、npm下載量對比分析

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

你不一定知道的npm那些知識

一、顯示npm install 詳細信息

1、顯示info級別信息

2、顯示verbose級別信息

3、顯示其他級別信息

二、查看項目某個庫或所有庫的版本號及依賴關系

三、庫版本解釋

四、鎖定庫版本

1、通過prefix控制（信息來源：npm-shrinkwrap鎖定依賴）

2、通過package-lock.json控制

3、通過shrinkwrap控制 （信息來源：npm-shrinkwrap鎖定依賴）

4、棄用npm，采用yarn；

五、查看npm配置信息

六、清除npm包緩存

七、某個項目不使用npm公共緩存

八、使用淘寶鏡像

九、npm 其他知識

十、推薦資料

十一、 npm與yarn、pnpm及相關

（一） 由facebook及google支持的yarn

（二） 由Zoltan Kochan 開發的pnpm

（三） node 內置的npm

十二、 推薦網站

十三、nvm注意事項

十四、gulp v3.9 與Node12不兼容解決方案

十五、專門分析npm大小的網站

十六、npm下載量對比分析

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

3、通過shrinkwrap控制（信息來源：npm-shrinkwrap鎖定依賴）

（一）由facebook及google支持的yarn

（二）由Zoltan Kochan 開發的pnpm

十二、推薦網站