本文將分享切換 npm 淘寶源的問(wèn)題以及一些 npm 使用方式和技巧。

眾所周知，npm 官方鏡像（registry.npmjs.org）在國(guó)內(nèi)訪問(wèn)很慢，很多同學(xué)都會(huì)選擇切換到國(guó)內(nèi)的一些 npm 鏡像，如淘寶鏡像、騰訊云鏡像。

1 月 22 日，淘寶原鏡像域名（registry.npm.taobao.org）的 HTTPS 證書(shū)正式到期：

這就導(dǎo)致舊的 npm 淘寶鏡像在使用時(shí)出錯(cuò)了：

npm ERR! request to registry.npm.taobao.org failed, reason: certificate has expired

其實(shí)，早在 2021 年，淘寶就發(fā)文稱，npm 淘寶鏡像已經(jīng)從 registry.npm.taobao.org 切換到了 registry.npmmirror.com。舊域名也將于 2022 年 5 月 31 日停止服務(wù)（不過(guò)，直到今天 HTTPS 證書(shū)到期才真正不能用了）。

所以，遇到上述問(wèn)題，或者還在使用舊的 npm 淘寶鏡像，直接將 npm 源切換到新的源即可：

// 1. 清空緩存
npm cache clean --force
// 2. 切換新源
npm config set registry https://registry.npmmirror.com

我們可以使用 nrm 來(lái)管理 npm 源，特別是當(dāng)需要在不同的網(wǎng)絡(luò)環(huán)境之間切換時(shí)，它可以提供更好的包管理體驗(yàn)。

nrm（npm registry manager）是一個(gè)用于管理和切換 npm 源的命令行工具。它允許您在不同的 npm 源之間進(jìn)行切換，以加快包的下載速度，或者解決特定源無(wú)法訪問(wèn)的問(wèn)題。nrm 提供了一組命令，可以列出可用的 npm 源、添加新源、測(cè)試源的響應(yīng)速度，并切換當(dāng)前使用的源。

首先，通過(guò)以下命令來(lái)安裝 nrm：

npm install -g nrm

以下是一些常見(jiàn)的 nrm 命令：

列出可用的源：當(dāng)前配置的所有可用 npm 源以及它們的名稱和 URL。

nrm ls

例如：

切換源：將當(dāng)前的 npm 源切換為指定的源。可以使用源的名稱或 URL 作為 <registry> 參數(shù)。

nrm use <registry>

添加源：添加一個(gè)新的 npm 源并指定其名稱和 URL。

nrm add <registry> <url>

刪除源：刪除指定的 npm 源，需要提供源的名稱或 URL 作為 <registry> 參數(shù)。

nrm del <registry>

測(cè)試源的速度：測(cè)試指定源的響應(yīng)速度，并顯示測(cè)試結(jié)果。

nrm test <registry>

顯示當(dāng)前使用的源：當(dāng)前正在使用的 npm 源的名稱和 URL。

nrm current

關(guān)于 npm 源就介紹到這里了。下面再來(lái)分享一些 npm 的使用技巧。

1、npm 基本概念

npm 全稱為 Node Package Manager，是一個(gè)基于 Node.js 的包管理器，也是 Node.js 社區(qū)最流行、支持的第三方模塊最多的包管理器。它的初衷就是讓開(kāi)發(fā)人員更容易分享和重用代碼。npm 提供了命令行工具，其主要功能是管理Node.js包，包括安裝、更新、刪除、查看、搜索、發(fā)布等。

npm 最初只是Node.js 的包管理器，但隨著前端技術(shù)的不斷發(fā)展，它的定位變成了廣義的包管理器，可以實(shí)現(xiàn)JavaScript、React、Vue、Gulp、移動(dòng)開(kāi)發(fā)等包管理，是目前最大、生態(tài)最為健全的包管理器。

npm 能解決 Node.js 在模塊管理上的很多問(wèn)題，其常見(jiàn)的應(yīng)用場(chǎng)景如下：

• 從npm鏡像服務(wù)器下載第三方模塊；
• 從npm鏡像服務(wù)器下載并安裝命令行程序到本地；
• 自己發(fā)布模塊到npm鏡像服務(wù)器供他人使用。

npm 不需要單獨(dú)安裝，在安裝 Node.js 時(shí)，就會(huì)連帶著一起安裝 npm 了。但是安裝的 npm 不一定是最新的版本，可以使用以下命令來(lái)查看本地 npm 的版本：

npm -v

這里的 -v 是 --version 的縮寫(xiě)，表示版本。如果想升級(jí) npm 版本，可以使用以下命令：

npm install npm@latest -g

這里@latest表示最新的版本，-g 是 --global 的縮寫(xiě)，表示全局安裝。

除此之外，還可以使用help命令來(lái)查看npm幫助：

npm 命令 --help

比如查看 install 的參數(shù)形式：

npm install --help

其中--help可以簡(jiǎn)寫(xiě)為-h，上面命令的執(zhí)行結(jié)果如下，可以看到install命令的很多形式：

常見(jiàn)的npm命令：

說(shuō)完這些概念，下面就來(lái)看看 npm 在使用時(shí)有哪些實(shí)用的技巧。

2、初始化 package

凡是使用npm管理的項(xiàng)目，都需要初始化一個(gè)package.json文件。

可以使用以下命令來(lái)初始化一個(gè)包：

npm init

當(dāng)執(zhí)行這個(gè)命令時(shí)，它會(huì)通過(guò)問(wèn)答的形式來(lái)一步步進(jìn)行設(shè)置。如果不需要修改默認(rèn)的配置，直接一路回車(chē)即可。如果想跳過(guò)向?qū)В焖偕梢粋€(gè)package.json 文件，可以執(zhí)行以下命令：

npm init --yes

其中，--yes可以簡(jiǎn)寫(xiě)為-y。這時(shí)生成的package.json文件的配置項(xiàng)就是 npm 的默認(rèn)配置。當(dāng)然這個(gè)默認(rèn)配置也是可以更改的，可以通過(guò)類(lèi)似下面這樣的形式來(lái)修改 npm 的默認(rèn)配置：

npm config set init.author.name YOUR_NAME  
npm config set init.author.email YOUR_EMAIL

當(dāng)執(zhí)行以上命令之后，之后再執(zhí)行 npm init 命令時(shí)，package.json 的作者姓名和郵箱都會(huì)初始化為我們?cè)O(shè)定的值。

3、快速了解 package

當(dāng)要使用一個(gè)包時(shí)，如果想要了解它是如何使用的，可以使用以下命令來(lái)打開(kāi)這個(gè)包的主頁(yè)，它會(huì)自動(dòng)啟動(dòng)瀏覽器并打開(kāi)這個(gè)頁(yè)面，這里以React為例：

npm home react

如果想要查看這個(gè)包現(xiàn)存的issue，或者公開(kāi)的roadmap，可以執(zhí)行以下命令：

npm bugs react

如果想要查看這個(gè)包的代碼地址，可以執(zhí)行以下命令：

npm repo react

如果想要查看這個(gè)包的詳細(xì)信息，可以執(zhí)行以下命令：

npm info react

執(zhí)行結(jié)果如下：

這里返回的是一個(gè)JavaScript對(duì)象，里面包含react模塊的詳細(xì)信息，可以通過(guò)info命令來(lái)獲取這個(gè)對(duì)象的成員信息：

npm info react description

執(zhí)行結(jié)果如下：

4、安裝依賴

可以使用npm install命令來(lái)安裝需要的包，如果想把這個(gè)包自動(dòng)添加到package.json中，可以執(zhí)行以下命令，這里以安裝React為例：

npm install react --save

如果想要安裝不同版本的包，可以這樣：

// 安裝最新版本
npm install react@latest
// 安裝指定版本
npm install react@16.8.0
// 安裝指定區(qū)間版本
npm install react@">=16.8.0 <17.0.1"

當(dāng)使用npm安裝依賴時(shí)，分為本地安裝（local）和全局安裝（global），它倆的區(qū)別就是是否包含-g參數(shù)：

可以使用require關(guān)鍵字來(lái)引入本地安裝的包。為了避免引用模塊消失，保證依賴模塊都會(huì)出現(xiàn)在package.json中，最好在npm install 時(shí)加上--save。

需要注意，在執(zhí)行npm install命令時(shí)，npm 5 之前只會(huì)下載，不會(huì)保存依賴信息。如果需要保存，就需要加上 --save 選項(xiàng)， npm 5 以后就可以省略 --save 選項(xiàng)了，它會(huì)自動(dòng)保存。

5、鎖定依賴

當(dāng)使用--save來(lái)安裝依賴時(shí)，npm 會(huì)把這個(gè)依賴保存起來(lái)，并添加^前綴，他表示，當(dāng)再次執(zhí)行 npm install 命令時(shí)，會(huì)自動(dòng)安裝這個(gè)包在此大版本下的最新版本。如果想要修改這個(gè)功能，可以執(zhí)行以下命令：

npm config set save-prefix='~'

執(zhí)行完該命令之后，就會(huì)把^符號(hào)改為~符號(hào)。當(dāng)再次安裝新模塊時(shí)，就從只允許小版本的升級(jí)變成了只允許補(bǔ)丁包的升級(jí)。

如果想要鎖定當(dāng)前的版本，可以執(zhí)行以下命令：

npm config set save-exact true

這樣每次 npm install xxx --save 時(shí)就會(huì)鎖定依賴的版本號(hào)，相當(dāng)于加了 --save-exact 參數(shù)。建議線上的應(yīng)用都采用這種鎖定版本號(hào)的方式。

為了徹底的鎖定依賴的版本，讓?xiě)?yīng)用在任何機(jī)器上都安裝同樣的版本，可以執(zhí)行以下命令：

npm shrinkwrap

執(zhí)行這個(gè)命令之后，就會(huì)在項(xiàng)目的根目錄產(chǎn)生一個(gè)npm-shrinkwrap.json配置文件，這里面包含了通過(guò)node_modules 計(jì)算出的模塊的依賴樹(shù)及版本。只要目錄下有 npm-shrinkwrap.json 則運(yùn)行 npm install 時(shí)就會(huì)優(yōu)先使用 npm-shrinkwrap.json 中的配置進(jìn)行安裝，沒(méi)有則使用 package.json 進(jìn)行安裝。

6、搜索依賴

npm 為我們提供了search 命令，用于搜索npm倉(cāng)庫(kù)，它搜索的參數(shù)可以是一個(gè)字符串，也可以是一個(gè)正則表達(dá)式：

npm search react

搜索結(jié)果如下：

當(dāng)然，我們也可以去node.js官網(wǎng)去找：https://www.npmjs.com/。

想要找到一個(gè)合適的依賴包可能并不是一件容易的事。這時(shí)，可以使用網(wǎng)站https://npms.io/，這里將各個(gè)包的質(zhì)量、受歡迎度、可維護(hù)性等指標(biāo)做了量化。這些指標(biāo)包括：是否使用了過(guò)時(shí)的依賴包、是否有代碼檢查配置、是否經(jīng)過(guò)測(cè)試以及最近的版本是何時(shí)發(fā)布的等。

不過(guò)，更直接方法可能就是去搜索引擎看別人的推薦了~

7、更新、卸載依賴

npm 為我們提供了更新依賴版本的命令：

npm update [package name]

如果想要更新全局安裝的模塊，需要添加參數(shù) -global：

npm update -global [package name]

當(dāng)執(zhí)行這兩個(gè)命令時(shí)，它會(huì)先到遠(yuǎn)程倉(cāng)庫(kù)查詢最新版本，然后查詢本地版本。如果本地版本不存在，或者遠(yuǎn)程版本較新，就會(huì)安裝。

如果想要更新該依賴包在package.json中的版本，就需要使用-S或者--save參數(shù)。需要注意的是，從npm v2.6.1 開(kāi)始，npm update只會(huì)更新頂層的模塊，而不更新依賴的依賴模塊，而之前的版本是遞歸更新的。如果想要這種效果，可以使用以下命令：

npm --depth 9999 update

除了可以更新包之外，還可以刪除指定的包：

npm uninstall [package name]

如果想要?jiǎng)h除全局的包，需要添加參數(shù) -global：

npm uninstall [package name] -global

8、查找過(guò)時(shí)的包

npm 提供了一個(gè)命令來(lái)查看過(guò)時(shí)的依賴：

npm outdated

在我的項(xiàng)目中執(zhí)行該命令，輸出結(jié)果如下：

可以看到，這里列出了過(guò)時(shí)依賴的包名稱、當(dāng)前的版本、希望的版本、最新的版本、依賴在本地路徑、依賴這個(gè)包的項(xiàng)目名稱。

可以通過(guò)以下命令來(lái)檢查npm包的最新版本：

// 展示包的信息
npm view <package-name>  
npm v <package-name>
// 展示最新版本
npm v <package-name> version
// 展示所有版本
npm v <package-name> versions

9、執(zhí)行腳本

npm 不僅可以用于管理模塊，還可以用于執(zhí)行腳本。在package.json文件中有一個(gè)scripts字段，可以用于定義腳本命令，功npm 使用。我們除了可以在package.json文件中查看有哪些命令，也可以使用以下命令來(lái)查看所有腳本命令：

npm run

我的項(xiàng)目中執(zhí)行該命令之后的結(jié)果如下：

可以看到，這里定義了dev、build、build:test等命令，如果需要執(zhí)行這些命令，只要這樣執(zhí)行即可：

npm run dev
npm run build

這里不在多說(shuō)，這或許是我們平時(shí)用的最多的命令了，可以根據(jù)實(shí)際開(kāi)發(fā)情況，來(lái)定制自己的npm命令。

10、安裝可靠的依賴

可以使用 npm ci 命令來(lái)清理、安裝依賴項(xiàng)。它通常用于CI/CD等自動(dòng)化環(huán)境，使用它可以獲得可靠的依賴。

npm ci

當(dāng)執(zhí)行該命令時(shí)，它會(huì)先刪除本地的node_modules文件，因此它不需要去校驗(yàn)已下載文件版本與控制版本的關(guān)系，也不用校驗(yàn)是否存在最新版本的庫(kù)，所以下載的速度相比npm install會(huì)更快。之后它會(huì)按照 package-lock.json 文件來(lái)安裝確切版本的依賴項(xiàng)。并且不會(huì)將這個(gè)版本寫(xiě)入package.json或者package-lock.json文件。

使用該命令時(shí)，需要注意：

• 項(xiàng)目必需有 package-lock.json 或 npm-shrinkwrap.json 文件，如果沒(méi)有，該命令將不起作用；
• npm ci 是 npm v6 中引入了的新命令，所以使用該命令時(shí)需要確保npm版本要>=5.7；
• npm ci 不能用來(lái)安裝單個(gè)依賴，只能用來(lái)安裝整個(gè)項(xiàng)目的依賴；
• npm ci 會(huì)安裝 dependencies 和 devDependencies；
• 整個(gè)安裝過(guò)程不會(huì)更新 package.json 或 package-lock.json 文件，整個(gè)安裝過(guò)程是鎖死的；
• 當(dāng)package-lock.json中的依賴和package.json中不一致時(shí)，npm ci 會(huì)退出但不會(huì)修改package-lock.json文件。

11、刪除重復(fù)的包

我們可以通過(guò)運(yùn)行npm dedupe命令來(lái)刪除重復(fù)的依賴項(xiàng)。該命令通過(guò)刪除重復(fù)包并在多個(gè)依賴包之間共享公共依賴項(xiàng)來(lái)簡(jiǎn)化整體的結(jié)構(gòu)。它會(huì)產(chǎn)生一個(gè)扁平的、去重的樹(shù)。

npm dedupe
npm ddp

12、掃描漏洞

可以運(yùn)行 npm audit 命令來(lái)掃描項(xiàng)目，來(lái)查找所有依賴項(xiàng)中存在的漏洞：

npm audit

來(lái)看我的項(xiàng)目掃描結(jié)果：

可以運(yùn)行以下命令來(lái)自動(dòng)安裝所有易受攻擊包的補(bǔ)丁版本：

npm audit fix

13、列舉已安裝的包

可以通過(guò)以下命令來(lái)獲取整個(gè)項(xiàng)目的包信息：

npm list

npm list命令以樹(shù)型結(jié)構(gòu)列出當(dāng)前項(xiàng)目安裝的所有模塊，以及它們依賴的模塊。

如果加上global參數(shù)，就會(huì)列出全局安裝的模塊：

npm list -global

也可以查看指定包的依賴，比如在我現(xiàn)在做的項(xiàng)目下，執(zhí)行以下命令：

npm list react

還可以使用npm ls 命令來(lái)查看指定包的依賴信息：

npm ls react

可以使用--depth參數(shù)來(lái)限制搜索的深度：

npm ls --depth=1

14、測(cè)試本地包

當(dāng)我們?cè)诒镜亻_(kāi)發(fā)npm模塊時(shí)，可以使用npm link命令來(lái)將本地的npm模塊連接到對(duì)用的項(xiàng)目中去，便于對(duì)模塊進(jìn)行調(diào)試和測(cè)試。使用方式也很簡(jiǎn)單，在項(xiàng)目中執(zhí)行以下命令：

npm link

執(zhí)行完該命令之后，就會(huì)為這個(gè)npm包創(chuàng)建到全局，路徑是 {prefix}/lib/node_modules/<package>，它是一個(gè)快捷方式。之后我們就可以使用以下命令來(lái)在需要這個(gè)模塊的項(xiàng)目中鏈接這個(gè)包：

npm link 模塊名

這里的模塊名就是依賴包的名稱，也就是模塊包的package.json文件中的name字段值。

如果不想繼續(xù)使用了，執(zhí)行以下命令來(lái)解除link即可：

npm unlink 模塊名