NPM命令實用使用技巧總結

• 2019 年 12 月 21 日
• 筆記

本文為翻譯文章，原文鏈接：https://blog.usejournal.com/npm-tips-and-tricks-c96356fd1b12

如有錯誤，歡迎指正～

如果你日常工作中有使用 NPM ，我相信你會喜歡這些使用技巧的。

創建項目

我們經常使用npm init來創建項目，並按照提示輸入項目資訊(項目名稱、作者等)，但是，如果我們並不關心項目資訊，並且保留默認值，那麼我們對 npm 請求的每條數據按 Enter 鍵即可。事實上，我們只需要使用npm init -y,這個命令就可以達到直接使用默認值資訊建一個項目。

安裝模組

使用npm install來安裝，你可以使用其簡寫npm i

一次性安裝多個模組

無需為你要安裝的每個模組都輸入一遍npm i指令，像這樣：

npm i gulp-pug  npm i gulp-debug  npm i gulp-sass

你只需要輸入一行命令即可一次性批量安裝模組

npm i gulp-pug gulp-debug gulp-sass

更快捷的是，如果安裝的所有模組的前綴是相同的，則可以這樣安裝，無需輸入完整模組名

npm i gulp{-debug,-sass,-pug}

使用一些安裝標誌的快捷方式

如果你想安裝一些包到生產環境依賴下面，你通常是這樣安裝：

npm i gulp --save-prod

更簡化，你可以使用-P標誌，這樣安裝：

npm i gulp -P

同理，開發環境下的依賴安裝，你可以用-D代替--save-dev

npm i gulp -D

當你不帶任何安裝標誌時，npm 默認將模組作為依賴項目添加到package.json文件中。如果你想避免這樣，你可以使用no-save,這樣安裝：

npm i vue --no-save

獲取安裝包資訊

使用npm view xxx或npm v xxx可以查看包資訊，如圖

如果你只是想看安裝包最近的版本資訊，你可以這樣：

> npm v vue version  > 2.5.17

如果你想獲取安裝包完整的版本資訊列表，你可以使用複數形式，例如：

> npm v vue versions  > [ '0.0.0',    '0.6.0',    '0.7.0',    ...    '2.5.15',    '2.5.16',    '2.5.17-beta.0',    '2.5.17' ]

安裝指定版本安裝包

如果你想安裝一個不是最新版本的安裝包，你可以指定某個版本來安裝，如：

npm i [email protected]

鑒於記住標籤比記住版本數字容易多了，你可以使用用npm v命令來查到的版本資訊列表裡面的dist-tag來安裝,比如：

npm i vue@beta

搜索安裝包

有時候你不能明確記得你曾經使用過的或者朋友推薦的包名，這種情況下，你可以使用npm search從終端直接執行搜索，如：

npm search gulp debug

或者

npm s gulp debug

這將列印出包含說明、作者等其他資訊的安裝包列表。如圖

卸載包

如果你不想轉到package.json文件並手動刪除依賴包，則可以用以下方法刪除：

npm uninstall vue

這個命令會刪除node_modules文件夾及package.json中對應的包。當然，你也可以用rm,un或者r來達到相同的效果:

npm rm vue

如果由於某些原因，你只想從node_modules文件夾中刪除安裝包，但是想在package.json中保留其依賴項，那麼你可以使用no-save標誌，如：

npm rm vue --no-save

依賴枚舉

如果你想看一下你的項目依賴了哪些安裝包，你可以這樣看：

npm ls

這個命令會將你項目的依賴列舉出來，並且各個安裝包的依賴也會顯示出來。如果你只想看本項目的依賴，你可以這樣：

npm ls --depth=0

這樣列印出來的結果就是本項目的依賴，像這樣：

├── [email protected]├── [email protected]└── [email protected]

當然，你也可以加上g來看看你全局安裝的依賴包，如：

npm ls -g -depth 0

過期依賴枚舉

大多數時候，你需要保持本地依賴的更新，你可以在項目目錄下先查看一下安裝包有沒有版本更新，如：

npm outdate

這個命令將會列出所有你可能有更新的過時的安裝包列表，如圖

執行測試

你可以使用npm run tests來執行測試用例，但是你可以更方便地用npm test或者npm t來執行。

顯示可用腳本

我們可以通過打開package.json文件來查看有哪些可執行的腳本，但是我們還可以這樣查看：

npm run

如果在package.json中有如下配置：

"scripts": {  "test": "jest",  "build": "gulp build"}

那麼執行這個命令之後，會顯示以下資訊：

Lifecycle scripts included in npm:    test      jest  available via `npm run-script`:    build      gulp-build

安裝Github Repo上的包

你可以直接這樣安裝來自Github repo上的包：

npm i https://github.com/sindresorhus/gulp-debug

或者你可以忽略域名安裝：

npm i sindresorhus/gulp-debug

打開安裝包的Github主頁

你當然可以直接Google搜索，然後找到對應的包鏈接打開，但是你還可以這樣：

npm repo create-react-app

有不需要安裝的包，又想看下其 github 主頁的，就可以這樣打開。

列出所有NPM環境的可用變數

你可以使用這個命令來列出所有NPM環境的可用變數：

npm run env | grep npm_

執行後，將會列印出這樣的資訊：

npm_config_fetch_retry_maxtimeout=60000npm_config_tag_version_prefix=v  npm_config_strict_ssl=truenpm_config_sso_type=oauth  .  .  .

這樣變數的用處就是，可以在腳本中使用它們，還可以創建自己的變數。

創建自己的NPM可用變數

你可以在package.json中添加新的 key 來創建自己的npm變數，可以是任何 key ，我更喜歡將所有的npm變數都放在一個config中，這樣看起來比較清晰：

"config": {  "build_folder":"./dist"}

你添加了之後，重新執行npm run env | grep npm_，就能看到以下資訊：

npm_package_config_build_folder=./dist  npm_config_fetch_retry_maxtimeout=60000npm_config_tag_version_prefix=v  npm_config_strict_ssl=truenpm_config_sso_type=oauth  .  .  .

默認情況下，npm會重命名你的變數，給其加上前綴npm_package，並將其結構保留在package.json文件中，即變為config_build_folder。

在npm腳本中使用npm變數

你可以看到可用變數的完整列表，如果你想使用這些變數中的任何值，就可以在package.json中使用了，如：

"scripts": {  "build": "gulp build --dist $npm_package_config_build_folder"}

當你執行npm run build的時候，實際執行的是這樣：

gulp build --dist ./dist

以上就是一些我最愛的日常工作中用到的命令，如有更多，歡迎來告訴我～