Hello，大家好！

日常開發(fā)中大家應(yīng)該經(jīng)常使用 npm install xxx 來(lái)安裝包依賴，那是否注意到npm升級(jí)到 npm@5.2.0 之后，在 npm 二進(jìn)制命令旁邊安裝了一個(gè) npx 二進(jìn)制文件呢？

沒有 npx 命令前

在沒有 npx 命令之前，我們想要執(zhí)行項(xiàng)目中安裝的可執(zhí)行腳本，以安裝 React 創(chuàng)建項(xiàng)目的腳手架 create-react-app 為例，通常使用下面的做法：

做法一，使用全局安裝然后再創(chuàng)建項(xiàng)目：

npm install create-react-app -g

create-react-app test-react

缺點(diǎn)

1. create-react-app 安裝項(xiàng)目本身是一個(gè)低頻次操作，全局安裝不具備必要性，同時(shí)如果其它低頻次工具也全局安裝，勢(shì)必會(huì)造成全局 path 混亂和冗余。
2. npm 生態(tài)系統(tǒng)越來(lái)越傾向于將工具安裝為項(xiàng)目本地?devDependencies?，讓每個(gè)項(xiàng)目獨(dú)立管理工具的版本，而不是都是用全局安裝的固定版本。

做法二，不全局安裝，需要先進(jìn)入腳手架目錄，再調(diào)用這個(gè)命令：

npm install create-react-app -D

cd node-modules/.bin/

create-react-app test-react

或者將 create-react-app 命令添加到 package.json 的 scripts中

缺點(diǎn)

這樣做每個(gè)項(xiàng)目可以安裝不同的腳手架版本，但操作還是略微繁瑣，同時(shí)每個(gè)項(xiàng)目都安裝一遍腳手架工具也是不必要的。

npx 就是為了解決這些問題，下面我們來(lái)了解一下。

npx 基本用法

了解基本用法之前，我們先看看 npx 的安裝。

安裝

在安裝完 node 以及 npm 后，會(huì)默認(rèn)安裝 npm 相同版本號(hào)的 npx 工具，當(dāng)然也可以獨(dú)立安裝：

npm install -g npx

執(zhí)行命令

npx create-react-app

使用 npx 執(zhí)行一個(gè)工具非常簡(jiǎn)單，不需要提前安裝 create-react-app ，直接使用 npx 就可以執(zhí)行這個(gè)工具，這源于 npx 的查找流程：

1. 先自動(dòng)查找當(dāng)前項(xiàng)目依賴包中的可執(zhí)行文件，也就是 node-modules/.bin/；
2. 如果找不到，就會(huì)去全局 $PATH 中查找，所以全局安裝的包不會(huì)重復(fù)安裝；
3. 如果依然找不到，就會(huì)幫你臨時(shí)安裝，執(zhí)行完命令后再刪除包。

擁有 npx 后，當(dāng)我們開發(fā)一個(gè)命令，就不用讓用戶先安裝再使用了，給用戶添加負(fù)擔(dān)。??

常用參數(shù)

同時(shí)，npx 還有一些常用的參數(shù)：

--no-install?和--ignore-existing?參數(shù)

如果想讓 npx 強(qiáng)制使用本地模塊，不下載遠(yuǎn)程模塊，可以使用--no-install參數(shù)。如果本地不存在該模塊，就會(huì)報(bào)錯(cuò)。

npx --no-install create-react-app

反過來(lái)，如果忽略本地的同名模塊，強(qiáng)制安裝使用遠(yuǎn)程模塊，可以使用--ignore-existing參數(shù)。比如，本地已經(jīng)全局安裝了create-react-app，但還是想使用遠(yuǎn)程模塊，就用這個(gè)參數(shù)。

npx --ignore-existing create-react-app my-react-app

-p 參數(shù)

-p參數(shù)用于指定 npx 所要安裝的模塊版本。

npx -p node@18.16.1 node -v 

上面命令先指定安裝node@18.16.1，然后再執(zhí)行node -v命令。

-p參數(shù)對(duì)于需要安裝多個(gè)模塊的場(chǎng)景很有用。

npx -p lolcatjs -p cowsay 'cowsay hello'

cowsay 工具會(huì)在命令行中生成羊圖案和對(duì)象的文字，lolcatjs 工具會(huì)將這只羊上色

-c 參數(shù)

如果 npx 安裝多個(gè)模塊，默認(rèn)情況下，所執(zhí)行的命令之中，只有第一個(gè)可執(zhí)行項(xiàng)會(huì)使用 npx 安裝的模塊，后面的可執(zhí)行項(xiàng)還是會(huì)交給 Shell 解釋。

npx -p lolcatjs -p cowsay 'cowsay hello | lolcatjs'
# 報(bào)錯(cuò)

上面代碼中，cowsay hello | lolcatjs執(zhí)行時(shí)會(huì)報(bào)錯(cuò)，原因是第一項(xiàng)cowsay由 npx 解釋，而第二項(xiàng)命令localcatjs由 Shell 解釋，但是lolcatjs并沒有全局安裝，所以報(bào)錯(cuò)。

-c參數(shù)可以將所有命令都用 npx 解釋。有了它，下面代碼就可以正常執(zhí)行了。

npx -p lolcatjs -p cowsay -c 'cowsay hello | lolcatjs'

-c參數(shù)的另一個(gè)作用，是將環(huán)境變量帶入所要執(zhí)行的命令。舉例來(lái)說，npm 提供當(dāng)前項(xiàng)目的一些環(huán)境變量，可以用下面的命令查看。

npm run env | grep npm_ # 查詢npm的環(huán)境變量，并篩選出以 npm_ 開頭的變量

-c參數(shù)可以把這些 npm 的環(huán)境變量帶入 npx 命令。

npx -c 'echo "$npm_package_name"'

上面代碼會(huì)輸出當(dāng)前項(xiàng)目的項(xiàng)目名。

npx 其它用法

使用不同版本的 node

利用 npx 可以下載模塊這個(gè)特點(diǎn)，可以指定某個(gè)版本的 Node 運(yùn)行腳本。它的竅門就是使用 npm 的?node 模塊。

npx node@18.16.1 -v

上面命令會(huì)使用 18.16.1 版本的 Node 執(zhí)行腳本。原理是從 npm 下載這個(gè)版本的 node，使用后再刪掉。

使用這個(gè)包，可以直接在一個(gè) node 環(huán)境下，使用不同版本的 node 測(cè)試開發(fā)的包是否正常運(yùn)行，當(dāng)然也可以使用 nvm 等 node 管理器，但是需要先切換再測(cè)試的方式效率明顯不如上面的命令。

執(zhí)行 GitHub 源碼

npx 還可以執(zhí)行 GitHub 上面的模塊源碼。

npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32
# 執(zhí)行倉(cāng)庫(kù)代碼
npx github:piuccio/cowsay hello

注意，遠(yuǎn)程代碼必須是一個(gè)模塊，即必須包含package.json和入口腳本。

本文具體參考了以下文章：

• Introducing npx: an npm package runner | by Kat Marchán | Medium
• GitHub - npm/npx: npm package executor
• npx 使用教程 - 阮一峰的網(wǎng)絡(luò)日志

總結(jié)

以上是生活随笔為你收集整理的你真的会用 npx 吗❓❓❓的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。