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

語言: CN / TW / HK

大家好,我是 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 https://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 [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官網去找:https://www.npmjs.com/

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

推薦使用 Openbase 搜索合適的包:https://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 模塊名