npx使用教程

今晚在學習Vue-Cli時, 由於突發奇想想試試最新的@4.x.x版本, 但是本地全域性安裝的腳手架版本是@2.x.x的, 因為不想汙染全域性於是就想到用npx命令, 一路上踩坑不斷, 為了以後能夠更好的使用npx並區分其跟npm的指令, 就有了本篇筆記

npm 是從5.2版開始, 增加(自帶)了 npx 命令。 如果發現沒安裝請手動安裝:

npm i -g npx

npm與npx的概念

  1. NPM(Node Package Manager) 是Node.js提供的一個包管理器, 可以使用 NPM 來安裝 node.js 包
  2. NPX(Node Package Excuted) 可以理解為用於臨時安裝並執行某個包的一個工具

總結的來說:

  1. npm專注於安裝包
  2. npx專注於執行包, 並且是較特殊的執行

npx的使用場景(對比npm的一些優勢)

從幾個使用場景出發, 希望能夠有對應您當前的場景, 這樣就能直接套用了

使用場景1: 想用專案中已經安裝好的某個包, 但是不能直接執行(因為沒有全域性安裝, 涉及環境變數的問題)

對於這個場景, 有些笨方法:

  1. 到專案的根目錄下執行: node-modules/.bin/包對應的指令碼
  2. 配置npm script: 在package.json的scripts中將方法1新增進指令碼, 然後就能在需要的時候執行"npm run 自定義指令"以快速執行啦, 本質上只是對方法1的改進

更優雅的方法, 就是使用npx命令啦:

npx <包對應的命令>

# 以less編譯為例:

npx lessc -v  # 檢視當前專案下less編譯器的版本

使用場景2: 已全域性安裝某個包, 專案又已安裝了不同版本的某個包, 想用專案的那個版本

以我今晚的踩坑作為第二個使用場景, 我本地已經全域性安裝了Vue腳手架的@2.x.x版本, 但是我想用並已經在本地專案檔案目錄中安裝了最新的@4.x.x版本, 即:

# 已經執行過

npm i -g vue-cli@2

vue -V # [email protected]

# 已經執行過

cd my-project

npm i -D @vue/cli@4

vue -V # [email protected]

這時, 如果使用vue -V會發現使用的是全域性的版本, 因為npm預設會執行全域性中的包。如果想使用專案已經安裝的那個版本就直接執行如下命令:

npx <包對應的命令>

# 以vue-cli為例:

npx vue create my-project

使用場景3: 不想全域性或在專案中安裝某個包, 只想臨時使用

對於這種場景, npx就是必要的選擇。npx會將要用的下載到一個臨時目錄, 使用完畢後自動刪除, 還是以Vue-Cli為例: 這次的我突發奇想想看看React腳手架的專案檔案結構, 由於我還沒學, 所以本地和全域性都沒有安裝(只是臨時想用腳手架建立一個React專案)

npx create-react-app my-react-project #react腳手架將會在專案搭建完後自動被刪除掉

使用場景4: 臨時使用特定版本的包(本地沒有安裝)

如題所示, 這裡以我突發奇想想使用Vue腳手架的@3.x.x版本, 但是我全域性已經安裝了@2.x.x版本

cd my-vue-project   # 進入我的vue專案

npx @vue/cli@3 create big-project   # 利用vue-cli的3.x版本建立一個名為big-project的專案

關於npx的一些引數

  1. 安裝並使用特定版本: npx 包@版本號 包對應的命令
  2. --no-install 強制使用本地包, 本地包如果沒安裝就會報錯: npx --no-install vue create my-project
  3. --ignore-existing 強制安裝使用遠端模組: npx --ignore-existing vue create my-project
  4. -p 對於一次性安裝多個包,使用引數-p: npx -p @vue/cli -p less 切記: 安裝多個包一定要使用 -p
  5. -c 在一次性安裝並使用多個包的場景中: 在低版本下執行npx -p vue-cli -p less lessc -v & vue -V命令, 有可能只有第一個命令項能正常執行, 即:只打印出less編輯器的版本。npx的引數-c就是為了告訴npx執行指定的所有命令的範圍: npx -p vue-cli -p less -c "lessc -v & vue -V", 這樣就能保證絕對的安全了。 注: &代表兩個命令都執行, |代表前面執行成功後面命令就不執行

這一小節中最常用、重要的是第5點, 根據此總結: 不管安裝的包、命令的個數個數是多少(哪怕只安裝1個包), 嚴格遵守npx -p 包1 -p 包2 -p 包n -c "命令1 & 命令2 & 命令n" 一定沒錯

寫在最後

囉裡囉嗦只為了更加詳細的記錄, 全文結束！