NPM命令實用使用技巧總結

本文爲翻譯文章，原文連接：blog.usejournal.com/npm-tips-an…

若有錯誤，歡迎指正～

使用技巧總結

若是你平常工做中有使用 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 vue@2.5.15
複製代碼

鑑於記住標籤比記住版本數字容易多了，你可使用用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
複製代碼

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

├── jquery@3.3.1
├── vue@2.5.17
└── yarn@1.12.3
複製代碼

固然，你也能夠加上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主頁

你固然能夠直接谷歌搜索，而後找到對應的包連接打開，可是你還能夠這樣：

npm repo create-react-app
複製代碼

有不須要安裝的包，又想看下其 github 主頁的，能夠這樣打開。

列出全部NPM環境的可用變量

你可使用這個命令來列出全部NPM環境的可用變量：

npm run env | grep npm_
複製代碼

執行後，將會打印出這樣的信息：

npm_config_fetch_retry_maxtimeout=60000
npm_config_tag_version_prefix=v
npm_config_strict_ssl=true
npm_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=60000
npm_config_tag_version_prefix=v
npm_config_strict_ssl=true
npm_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
複製代碼

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

最後

• 歡迎加我微信(winty230)，拉你進技術羣，長期交流學習...
• 歡迎關注「前端Q」,認真學前端，作個有專業的技術人...