你可能不知道的 Npm 實用技巧

大家好，我是 CUGGZ。

今天來分享一些實用的 npm 技巧！

1、npm 基本概念

npm 全稱為 Node Package Manager，是一個基於 Node.js 的包管理器，也是 Node.js 社群最流行、支援的第三方模組最多的包管理器。它的初衷就是讓開發人員更容易分享和重用程式碼。npm 提供了命令列工具，其主要功能是管理Node.js包，包括安裝、更新、刪除、檢視、搜尋、釋出等。

npm 最初只是Node.js 的包管理器，但隨著前端技術的不斷髮展，它的定位變成了廣義的包管理器，可以實現JavaScript、React、Vue、Gulp、移動開發等包管理，是目前最大、生態最為健全的包管理器。

npm 能解決 Node.js 在模組管理上的很多問題，其常見的應用場景如下：

• 從npm映象伺服器下載第三方模組。
• 從npm映象伺服器下載並安裝命令列程式到本地。
• 自己釋出模組到npm映象伺服器供他人使用。

npm 不需要單獨安裝，在安裝 Node.js 時，就會連帶著一起安裝 npm 了。但是安裝的 npm 不一定是最新的版本，可以使用以下命令來檢視本地 npm 的版本：

npm -v

這裡的 -v 是 --version 的縮寫，表示版本。如果想升級 npm 版本，可以使用以下命令：

npm install npm@latest -g

這裡@latest表示最新的版本，-g 是 --global 的縮寫，表示全域性安裝。

除此之外，還可以使用help命令來檢視npm幫助：

npm 命令 --help

比如檢視 install 的引數形式：

npm install --help

其中--help可以簡寫為-h，上面命令的執行結果如下，可以看到install命令的很多形式：

常見的npm命令：

命令	作用
npm -v	檢視 npm 版本。
npm init	初始化後會出現一個 package.json 配置檔案。可以在後面加上 -y ，快速跳過問答式介面。
npm install	根據專案中的 package.json 檔案自動下載專案所需的全部依賴。
npm install 包名 --save-dev(npm install 包名 -D)	安裝的包只用於開發環境，不用於生產環境，會出現在 package.json 檔案中的 devDependencies 屬性中。
npm install 包名 --save(npm install 包名 -S)	安裝的包需要釋出到生產環境的，會出現在 package.json 檔案中的 dependencies 屬性中。
npm list	檢視當前目錄下已安裝的 node 包。
npm list -g	檢視全域性已經安裝過的 node 包。
npm --help	檢視 npm 幫助命令。
npm update 包名	更新指定包。
npm uninstall 包名	解除安裝指定包。
npm config list	檢視配置資訊。
npm 指定命令 --help	檢視指定命令的幫助。
npm info 指定包名	檢視遠端 npm 上指定包的所有版本資訊。
npm config set registry http://registry.npm.taobao.org	修改包下載源，這裡修改為了淘寶映象。
npm root	檢視當前包的安裝路徑。
npm root -g	檢視全域性的包的安裝路徑。
npm ls 包名	檢視本地安裝的指定包及版本資訊，沒有顯示 empty。
npm ls 包名 -g	檢視全域性安裝的指定包及版本資訊，沒有顯示 empty。

說完這些概念，下面就來看看 npm 在使用時有哪些實用的技巧。

2、初始化 package.json

凡是使用npm管理的專案，都需要初始化一個package.json檔案。

可以使用以下命令來初始化一個包：

npm init

當執行這個命令時，它會通過問答的形式來一步步進行設定。如果不需要修改預設的配置，直接一路回車即可。如果想跳過嚮導，快速生成一個package.json 檔案，可以執行以下命令：

npm init --yes

其中，--yes可以簡寫為-y。這時生成的package.json檔案的配置項就是 npm 的預設配置。當然這個預設配置也是可以更改的，可以通過類似下面這樣的形式來修改 npm 的預設配置：

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

當執行以上命令之後，之後再執行 npm init 命令時，package.json 的作者姓名和郵箱都會初始化為我們設定的值。

3、快速瞭解 package.json

當要使用一個包時，如果想要了解它是如何使用的，可以使用以下命令來開啟這個包的主頁，它會自動啟動瀏覽器並開啟這個頁面，這裡以React為例：

npm home react

如果想要檢視這個包現存的issue，或者公開的roadmap，可以執行以下命令：

npm bugs react

如果想要檢視這個包的程式碼地址，可以執行以下命令：

npm repo react

如果想要檢視這個包的詳細資訊，可以執行以下命令：

npm info react

執行結果如下：

這裡返回的是一個JavaScript物件，裡面包含react模組的詳細資訊，可以通過info命令來獲取這個物件的成員資訊：

npm info react description

執行結果如下：

4、安裝依賴

可以使用npm install命令來安裝需要的包，如果想把這個包自動新增到package.json中，可以執行以下命令，這裡以安裝React為例：

npm install react --save

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

// 安裝最新版本
npm install react@latest
// 安裝指定版本
npm install rea[email protected]
// 安裝指定區間版本
npm install react@">=16.8.0 <17.0.1"

當使用npm安裝依賴時，分為本地安裝（local）和全域性安裝（global），它倆的區別就是是否包含-g引數：

命令	簡寫	說明
無	無	將模組安裝到本地node_modules目錄下，但不儲存在package.json中。
--save	-S	將模組安裝到本地node_modules目錄下，同時儲存到package.json中的dependencies配置項中，在生產環境下這個包的依賴依然存在。
--sava-dev	-D	將模組安裝到本地node_modules目錄下，同時儲存到package.json中的devDependencies配置項中，僅供開發時使用。
--global	-g	安裝的模組為全域性模組，如果命令列模組，會直接連結到環境變數中。

可以使用require關鍵字來引入本地安裝的包。為了避免引用模組消失，保證依賴模組都會出現在package.json中，最好在npm install 時加上--save。

需要注意，在執行npm install命令時，npm 5 之前只會下載，不會儲存依賴資訊。如果需要儲存，就需要加上 --save 選項， npm 5 以後就可以省略 --save 選項了，它會自動儲存。

5、鎖定依賴

當使用--save來安裝依賴時，npm 會把這個依賴儲存起來，並新增^字首，他表示，當再次執行 npm install 命令時，會自動安裝這個包在此大版本下的最新版本。如果想要修改這個功能，可以執行以下命令：

npm config set save-prefix='~'

執行完該命令之後，就會把^符號改為~符號。當再次安裝新模組時，就從只允許小版本的升級變成了只允許補丁包的升級。

如果想要鎖定當前的版本，可以執行以下命令：

npm config set save-exact true

這樣每次 npm install xxx --save 時就會鎖定依賴的版本號，相當於加了 --save-exact 引數。建議線上的應用都採用這種鎖定版本號的方式。

為了徹底的鎖定依賴的版本，讓應用在任何機器上都安裝同樣的版本，可以執行以下命令：

npm shrinkwrap

執行這個命令之後，就會在專案的根目錄產生一個npm-shrinkwrap.json配置檔案，這裡麵包含了通過node_modules 計算出的模組的依賴樹及版本。只要目錄下有 npm-shrinkwrap.json 則執行 npm install 時就會優先使用 npm-shrinkwrap.json 中的配置進行安裝，沒有則使用 package.json 進行安裝。

6、搜尋依賴

npm 為我們提供了search 命令，用於搜尋npm倉庫，它搜尋的引數可以是一個字串，也可以是一個正則表示式：

npm search react

搜尋結果如下：

當然，我們也可以去node.js官網去找：http://www.npmjs.com/

想要找到一個合適的依賴包可能並不是一件容易的事。這時，可以使用網站http://npms.io/，這裡將各個包的質量、受歡迎度、可維護性等指標做了量化。這些指標包括：是否使用了過時的依賴包、是否有程式碼檢查配置、是否經過測試以及最近的版本是何時釋出的等。

推薦使用 Openbase 搜尋合適的包：http://openbase.com/

7、更新、解除安裝依賴

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

npm update [package name]

如果想要更新全域性安裝的模組，需要新增引數 -global：

npm update -global [package name]

當執行這兩個命令時，它會先到遠端倉庫查詢最新版本，然後查詢本地版本。如果本地版本不存在，或者遠端版本較新，就會安裝。

如果想要更新該依賴包在package.json中的版本，就需要使用-S或者--save引數。需要注意的是，從npm v2.6.1 開始，npm update只會更新頂層的模組，而不更新依賴的依賴模組，而之前的版本是遞迴更新的。如果想要這種效果，可以使用以下命令：

npm --depth 9999 update

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

npm uninstall [package name]

如果想要刪除全域性的包，需要新增引數 -global：

npm uninstall [package name] -global

8、查詢過時的包

npm 提供了一個命令來檢視過時的依賴：

npm outdated

在專案中執行該命令，輸出結果如下：

可以看到，這裡列出了過時依賴的包名稱、當前的版本、希望的版本、最新的版本、依賴在本地路徑、依賴這個包的專案名稱。

可以通過以下命令來檢查npm包的最新版本：

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

9、執行指令碼

npm 不僅可以用於管理模組，還可以用於執行指令碼。在package.json檔案中有一個scripts欄位，可以用於定義指令碼命令，功npm 使用。我們除了可以在package.json檔案中檢視有哪些命令，也可以使用以下命令來檢視所有指令碼命令：

npm run

在專案中執行該命令之後的結果如下：

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

npm run dev
npm run build

這裡不在多說，這或許是我們平時用的最多的命令了，可以根據實際開發情況，來定製自己的npm命令。

10、安裝可靠的依賴

可以使用 npm ci 命令來清理、安裝依賴項。它通常用於CI/CD等自動化環境，使用它可以獲得可靠的依賴。

npm ci

當執行該命令時，它會先刪除本地的node_modules檔案，因此它不需要去校驗已下載檔案版本與控制版本的關係，也不用校驗是否存在最新版本的庫，所以下載的速度相比npm install會更快。之後它會按照 package-lock.json 檔案來安裝確切版本的依賴項。並且不會將這個版本寫入package.json或者package-lock.json檔案。

使用該命令時，需要注意：

• 專案必需有 package-lock.json 或 npm-shrinkwrap.json 檔案，如果沒有，該命令將不起作用。
• npm ci 是 npm v6 中引入了的新命令，所以使用該命令時需要確保npm版本要>=5.7。
• npm ci 不能用來安裝單個依賴，只能用來安裝整個專案的依賴。
• npm ci 會安裝 dependencies 和 devDependencies。
• 整個安裝過程不會更新 package.json 或 package-lock.json 檔案，整個安裝過程是鎖死的。
• 當package-lock.json中的依賴和package.json中不一致時，npm ci 會退出但不會修改package-lock.json檔案。

11、刪除重複的包

我們可以通過執行npm dedupe命令來刪除重複的依賴項。該命令通過刪除重複包並在多個依賴包之間共享公共依賴項來簡化整體的結構。它會產生一個扁平的、去重的樹。

npm dedupe
npm ddp

12、掃描漏洞

可以執行 npm audit 命令來掃描專案，來查詢所有依賴項中存在的漏洞：

npm audit

下面是掃描結果：

可以執行以下命令來自動安裝所有易受攻擊包的補丁版本：

npm audit fix

13、檢視已安裝的包

可以通過以下命令來獲取整個專案的包資訊：

npm list

npm list 命令以樹型結構列出當前專案安裝的所有模組，以及它們依賴的模組。

如果加上global引數，就會列出全域性安裝的模組：

npm list -global

也可以檢視指定包的依賴，比如在我現在做的專案下，執行以下命令：

npm list react

還可以使用npm ls 命令來檢視指定包的依賴資訊：

npm ls react

可以使用--depth引數來限制搜尋的深度：

npm ls --depth=1

14、測試本地包

當我們在本地開發npm模組時，可以使用npm link命令來將本地的npm模組連線到對用的專案中去，便於對模組進行除錯和測試。使用方式也很簡單，在專案中執行以下命令：

npm link

執行完該命令之後，就會為這個npm包建立到全域性，路徑是 {prefix}/lib/node_modules/<package>，它是一個快捷方式。之後我們就可以使用以下命令來在需要這個模組的專案中連結這個包：

npm link 模組名

這裡的模組名就是依賴包的名稱，也就是模組包的package.json檔案中的name欄位值。

如果不想繼續使用了，執行以下命令來解除link即可：

npm unlink 模組名