一、顯示npm install 詳細(xì)信息
按照如下設(shè)置后双炕，可以在npm install 后查看每一個(gè)步驟贾节，方便查看安裝的詳細(xì)信息汁汗，對(duì)出現(xiàn)異常情況排查原因非常有用，比如栗涂，可以清楚的知道安裝某個(gè)包時(shí)具體卡在什么環(huán)節(jié)等知牌。
1、顯示info級(jí)別信息
推薦設(shè)置這個(gè)級(jí)別就可以了
npm config set loglevel info
2斤程、顯示verbose級(jí)別信息
這個(gè)級(jí)別比info級(jí)別更詳細(xì)
npm config set loglevel verbose
3角寸、顯示其他級(jí)別信息
https://docs.npmjs.com/misc/config#loglevel
二、查看項(xiàng)目某個(gè)庫(kù)或所有庫(kù)的版本號(hào)及依賴(lài)關(guān)系
1、查看某個(gè)庫(kù)的版本號(hào)及依賴(lài)關(guān)系
npm ls 包名
// 查看 base64-js版本及依賴(lài)關(guān)系
npm ls base64-js
2扁藕、查看項(xiàng)目所有庫(kù)版本及依賴(lài)關(guān)系
// 查看所有依賴(lài)的版本(當(dāng)前項(xiàng)目)
npm ls
// 查看所有依賴(lài)的版本(全局 非當(dāng)前項(xiàng)目)
npm ls -g
// 查看所有一級(jí)依賴(lài)的版本
npm ls --depth 0 或 npm ls --depth=0
// 查看所有一級(jí)依賴(lài)及二級(jí)依賴(lài)的版本
npm ls --depth=1 或 npm ls --depth 1
// 查看所有三級(jí)依賴(lài)及三級(jí)依賴(lài)的版本
npm ls --depth=3 或 npm ls --depth 3
3沮峡、查看項(xiàng)目dependencies或devDependencies所有庫(kù)版本及依賴(lài)關(guān)系
// 查看所有dependencies一級(jí)依賴(lài)的版本
npm list -depth 0 -prod true
// 查看所有devDependencies一級(jí)依賴(lài)的版本
npm list -depth 0 -dev true
三、庫(kù)版本解釋
庫(kù)版本解釋 截圖自： 2018 年了亿柑，你還是只會(huì) npm install 嗎邢疙？
四、鎖定庫(kù)版本
1橄杨、通過(guò)prefix控制（信息來(lái)源：npm-shrinkwrap鎖定依賴(lài)）
當(dāng)運(yùn)行 npm update 時(shí)秘症，
a、^1.5.1 【限制主版本號(hào)】允許安裝版本號(hào)大于 1.5.1 但小于 2.0.0 版本的模塊
npm默認(rèn)采用這種方式b式矫、~1.5.1 【限制次要版本】 允許安裝版本號(hào)大于 1.5.1 但小于 1.6.0 版本的模塊
可通過(guò)npm config set save-prefix="~"將默認(rèn)的^修改為~c乡摹、1.5.1 【精確控制】允許安裝版本號(hào)大于 1.5.1
可通過(guò)npm config set save-exact true將默認(rèn)的^取除掉
在此個(gè)人推薦采用~1.5.1的方式；
2采转、通過(guò)package-lock.json控制
npm 5.0+ 后 npm install時(shí)會(huì)自動(dòng)創(chuàng)建package-lock.json文件聪廉；package-lock.json的出現(xiàn)，npm install規(guī)則發(fā)生了三次變化：（信息來(lái)源: npm install 生成的package-lock.json是什么文件故慈？有什么用板熊？）
a、 npm 5.0.x版本
不管package.json怎么變化察绷，npm install 都會(huì)根據(jù)package-lock.json 文件下載干签；b、 npm 5.1.0+版本
npm install會(huì)無(wú)視package-lock.json拆撼， 根據(jù)package.json下載容劳，也就是package.json的權(quán)限會(huì)高于package-lock.json；c闸度、 npm 5.4.2+版本
npm install時(shí) 如果package.json與package-lock.json不一致竭贩，則根據(jù)package.json的語(yǔ)法規(guī)則進(jìn)行下載；如果一致時(shí)莺禁，則都會(huì)根據(jù)package-lock.json下載留量；補(bǔ)充知識(shí) : npx 是在npm 5.2.0+版本支持的 http://www.ruanyifeng.com/blog/2019/02/npx.html
3、通過(guò)shrinkwrap控制 （信息來(lái)源：npm-shrinkwrap鎖定依賴(lài)）
步驟1哟冬、如果不能保證package.json文件定義的依賴(lài)與node_modules下已安裝的依賴(lài)是匹配楼熄、無(wú)冗余的，建議執(zhí)行 清理依賴(lài)并重新安裝（
rm -rf node_modules && npm install）或者精簡(jiǎn)依賴(lài)--移除無(wú)關(guān)的包(npm prune)步驟2浩峡、
npm shrinkwrap運(yùn)行后孝赫，如果原來(lái)有package-lock.json文件的，將單純的重命名為npm-shrinkwrap.json步驟3红符、
npm install后，記得運(yùn)行npm shrinkwrap以便更新npm-shrinkwrap.json文件
也就是使用shrinkwrap控制庫(kù)版本時(shí)需要執(zhí)行三條命令；
package-lock.json與npm-shrinkwrap.json的作用類(lèi)似预侯，但是區(qū)別如下：
a致开、如果根目錄下同時(shí)存在這兩個(gè)文件，則以npm-shrinkwrap.json為準(zhǔn)萎馅；
b双戳、npm-shrinkwrap.json在npm v2、npm v3糜芳、npm v4 就已經(jīng)支持了飒货，但是package-lock.json 僅在npm v5+及以后才支持；
c峭竣、npm-shrinwkrap.json 可以被包含到發(fā)布包塘辅，而 package-lock.json 不行，保證用戶(hù)可以自由管理依賴(lài)包皆撩；
4扣墩、棄用npm，采用yarn扛吞；
五呻惕、查看npm配置信息
1、查看簡(jiǎn)要信息 npm config list
2滥比、查看所有信息 npm config list -l
六亚脆、清除npm包緩存
1、刪除 node_modules及package-lock.json盲泛；
2濒持、執(zhí)行 npm cache clean --force 刪除所有緩存 （其實(shí)清的是 ~/.npm/_cacache文件夾中的數(shù)據(jù)-https://github.com/sliwey/blog/issues/1），如果你本地有多個(gè)項(xiàng)目查乒，不是很推薦這種做法(因?yàn)榭赡芷渌?xiàng)目可能用到了這里面的緩存了) 推薦采用下面一點(diǎn) 七弥喉、某個(gè)項(xiàng)目不使用npm公共緩存
七、某個(gè)項(xiàng)目不使用npm公共緩存
1玛迄、先查看該項(xiàng)目的npm緩存目錄在哪里
可以通過(guò)npm config get cache查看當(dāng)前npm的緩存在哪里由境；下圖說(shuō)明在npm公共緩存目錄中
2、在該項(xiàng)目根目錄下創(chuàng)建.npmrc文件蓖议，并在該文件中寫(xiě)入
cache=.npm
3虏杰、確認(rèn)npm緩存目錄在哪里，如下圖這么顯示說(shuō)明成功了
參考：http://claude-ray.com/2019/12/06/npm-install-without-cache/
八勒虾、使用淘寶鏡像
這個(gè)大家應(yīng)該都知道纺阔，不解釋了
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org 設(shè)置淘寶鏡像
npm config set registry https://registry.npmjs.org/ 設(shè)置原始npm源
推薦安裝使用nrm來(lái)管理源
九、npm 其他知識(shí)
1修然、升級(jí)npm
npm install npm@latest -g
2笛钝、使用npx 執(zhí)行某個(gè)插件 (如果項(xiàng)目中沒(méi)有质况，則安裝最新的插件)
npx uglify-js -v
npx uglify-js -m -- test.js >>yasuo.js
npx webpack -v
npx node@10 -v npx node@12 -v 可以避免使用nvm之類(lèi)的工具
3、npm install xx -g 后安裝目錄可以通過(guò) npm root -g查看玻靡。例如 Windows上的為 C:\Users\你的用戶(hù)名\AppData\Roaming\npm\node_modules
4结榄、查看npm包詳細(xì)信息 npm view 包名
5、查看所有可以版本
npm view 包名 versions
6囤捻、查看當(dāng)前項(xiàng)目可以的新版本
npm outdated
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
8、如果安裝的模塊依賴(lài)了c++蝎土，則安裝過(guò)程中會(huì)隱性安裝node-gyp视哑，node-gyp可以編譯這些依賴(lài)c++模塊的模塊，但是node-gyp在首次編譯時(shí)會(huì)依賴(lài)node源碼誊涯，所以又會(huì)去悄悄去下載node挡毅，雖然安裝時(shí)設(shè)置了淘寶鏡像，但是此時(shí)是無(wú)效的醋拧，可以使用
disturl 來(lái)解決 npm config set disturl https://npm.taobao.org/mirrors/node/9慷嗜、node-sass安裝時(shí)會(huì)從github上下載一個(gè)叫binding.node的文件，而github releases里的文件都托管在亞馬遜的服務(wù)器上丹壕，導(dǎo)致國(guó)內(nèi)無(wú)法訪問(wèn)庆械，因此可以使用 sass_binary_site 來(lái)解決
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/，類(lèi)似的情況還有很多:
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版本相關(guān)聯(lián)：
使用nvm或n 進(jìn)行版本切換時(shí)缭乘，可能會(huì)出現(xiàn)binding.node匹配不到的情況，此時(shí)可通過(guò)
npm cache clean -f
npm rebuild node-sass 或 刪除node_modules及package-lock.json 文件重新安裝
類(lèi)似node-sass從國(guó)外服務(wù)器下載東西還有很多 琉用，有時(shí)需要在Github上克隆一份該模塊的源碼進(jìn)行分析堕绩，搜索包含base、binary邑时、cdn奴紧、config、dist晶丘、download黍氮、host、mirror浅浮、npm沫浆、site、url等這樣的關(guān)鍵詞(自行探索滚秩，通匙ㄖ矗「mirror」的匹配度最高) https://mp.weixin.qq.com/s/u4oI_tdYDIFQeTPSifCt7g#
10、在項(xiàng)目中新增一個(gè)重裝的指令
rimraf 是一個(gè)node版的 rm -rf
npm i -g rimraf
{
"scripts": {
"reinstall": "rimraf node_modules && rimraf package-lock.json && npm i"
}
}
11郁油、依賴(lài)相同的包的安裝機(jī)制
如：A和B包都依賴(lài)C本股，那么C會(huì)因npm版本的不同安裝至不同的目錄攀痊。如果npm版本為2及以下，則是
如果npm版本為3及以上痊末，
若碰到依賴(lài)的版本不同會(huì)怎么樣呢蚕苇？
假設(shè)A、B 依賴(lài)D (v0.0.1)凿叠，C依賴(lài)D（v0.0.2）：
如果C的順序在A，B的前面（npm intsall時(shí) package.json 里依賴(lài)的順序會(huì)依次解析）
推薦看這篇文章：https://www.zoo.team/article/npm-details
12嚼吞、依賴(lài)類(lèi)型的區(qū)別
- a盒件、dependencies
生成環(huán)境及開(kāi)發(fā)環(huán)境的依賴(lài) - b、devDependencies
開(kāi)發(fā)環(huán)境依賴(lài) - c舱禽、optionalDependencies
可選的依賴(lài)包炒刁，(可有可無(wú)的依賴(lài)) - d、peerDependencies
同等依賴(lài)誊稚，必須先安裝某些包翔始，如ant-design@3.x的配置如下
"peerDependencies": {
"react": ">=16.9.0",
"react-dom": ">=16.9.0"
},
- e、bundledDependencies
捆綁依賴(lài)包
13里伯、需要修改某個(gè)npm包城瞎，但不想聯(lián)系作者修改/發(fā)起pull request或者自己下載代碼下來(lái)修改完后再發(fā)布npm
可以使用patch-package npm包，在安裝完這個(gè)npm包后疾瓮，在package.json中的script添加"postinstall": "patch-package"脖镀，然后修改你想要修改的npm包源碼文件(在項(xiàng)目根目錄node_modules文件夾里），然后執(zhí)行npx patch-package 你想要修改的npm包名稱(chēng)狼电，即可蜒灰。詳細(xì)步驟請(qǐng)見(jiàn)：使用patch-package定制node_modules 中的依賴(lài)包
十、推薦資料
1肩碟、[譯]npm入門(mén)指南
2强窖、npm-shrinkwrap鎖定依賴(lài)
3、在JavaScript項(xiàng)目中鎖定npm依賴(lài)包版本
4削祈、 npm 官方文檔 https://docs.npmjs.com/cli/v6/commands/npm-ls
5翅溺、 中文文檔 https://www.npmjs.cn/getting-started/what-is-npm/
6、npm 模塊安裝機(jī)制簡(jiǎn)介 http://www.ruanyifeng.com/blog/2016/01/npm-install.html
7岩瘦、手把手教你快速制作基于Element UI組件npm包 http://www.reibang.com/p/b375e1eb549b
十一未巫、 npm與yarn、pnpm及相關(guān)
（一） 由facebook及google支持的yarn
1启昧、查看包引入
有時(shí)npm嵌套的太深叙凡，我們不知道某個(gè)包是怎么引進(jìn)來(lái)的，這時(shí)我們可以使用 yarn why <package-name> 來(lái)查看它是誰(shuí)引入的
（二） 由Zoltan Kochan 開(kāi)發(fā)的pnpm
1密末、為什么現(xiàn)在我更推薦 pnpm 而不是 npm/yarn?
2、Zoltan Kochan--Why should we use pnpm?
（三） node 內(nèi)置的npm
Node.js 16.9.0 開(kāi)始內(nèi)置Corepack楞捂，其將默認(rèn)支持pnpm纬向、yarn包管理器
十二、 推薦網(wǎng)站
1追城、查看某個(gè)npm包被哪個(gè)npm包作為依賴(lài)引用了，例如handlebars包：
https://cnpmjs.org/package/handlebars
2燥撞、分析某個(gè)npm https://npm.devtool.tech/
例如查看cdn： https://npm.devtool.tech/cdn/handlebars
3座柱、在線運(yùn)行npm
https://npm.runkit.com/js-utils-lc
4、查看npm包的源文件
a. https://cdn.jsdelivr.net/npm/js-utils-lc/
b. https://www.jsdelivr.com/package/npm/js-utils-lc
c. https://npm.runkit.com/js-utils-lc
5物舒、查看npm包下載量及對(duì)應(yīng)的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注意事項(xiàng)
1 設(shè)置默認(rèn)版本 nvm alias default v8.9.1
2 查看nvm安裝的目錄echo $NVM_DIR
十四冠胯、gulp v3.9 與Node12不兼容解決方案
使用Node 12 運(yùn)行g(shù)ulp 3.9時(shí)會(huì)報(bào)primordials is not defined 錯(cuò)誤火诸，可以在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"
}
}
以上親測(cè)有效。(原理是npm-force-resolutions 可以控制依賴(lài)的依賴(lài)荠察，有點(diǎn)類(lèi)似yarn的 selective dependency
)
或者（以下方法待驗(yàn)證：https://blog.csdn.net/qq_22713201/article/details/122329418）
1置蜀、項(xiàng)目根目錄新建npm-shrinkwrap.json
2、npm-shrinkwrap.json內(nèi)容修改如下：
{
"dependencies": {
"graceful-fs": {
"version": "4.2.2"
}
}
}
十五悉盆、專(zhuān)門(mén)分析npm大小的網(wǎng)站
十六盯荤、npm下載量對(duì)比分析
https://npmtrends.com
例如：/angular-vs-react-vs-vue
