快捷導(dǎo)航

Node.js中npx命令的使用方法及場景分析

更新時(shí)間：2021年08月02日 09:15:32 作者：Fitz

NPM(Node Package Manager) 是Node.js提供的一個(gè)包管理器, 可以使用 NPM 來安裝 node.js 包，npm 是從5.2版開始, 增加(自帶)了 npx 命令，本文給大家分享Node.js npx命令使用，需要的朋友一起看看吧

npx使用教程

今晚在學(xué)習(xí)Vue-Cli時(shí), 由于突發(fā)奇想想試試最新的@4.x.x版本, 但是本地全局安裝的腳手架版本是@2.x.x的, 因?yàn)椴幌胛廴救钟谑蔷拖氲接?code>npx命令, 一路上踩坑不斷, 為了以后能夠更好的使用npx并區(qū)分其跟npm的指令, 就有了本篇筆記

npm 是從5.2版開始, 增加(自帶)了 npx 命令。如果發(fā)現(xiàn)沒安裝請(qǐng)手動(dòng)安裝:

npm i -g npx

npm與npx的概念

NPM(Node Package Manager) 是Node.js提供的一個(gè)包管理器, 可以使用 NPM 來安裝 node.js 包
NPX(Node Package Excuted) 可以理解為用于臨時(shí)安裝并執(zhí)行某個(gè)包的一個(gè)工具

總結(jié)的來說:

npm專注于安裝包
npx專注于執(zhí)行包, 并且是較特殊的執(zhí)行

npx的使用場景(對(duì)比npm的一些優(yōu)勢)

從幾個(gè)使用場景出發(fā), 希望能夠有對(duì)應(yīng)您當(dāng)前的場景, 這樣就能直接套用了

使用場景1: 想用項(xiàng)目中已經(jīng)安裝好的某個(gè)包, 但是不能直接執(zhí)行(因?yàn)闆]有全局安裝, 涉及環(huán)境變量的問題)

對(duì)于這個(gè)場景, 有些笨方法:

到項(xiàng)目的根目錄下執(zhí)行: node-modules/.bin/包對(duì)應(yīng)的腳本
配置npm script: 在package.json的scripts中將方法1添加進(jìn)腳本, 然后就能在需要的時(shí)候執(zhí)行"npm run 自定義指令"以快速執(zhí)行啦, 本質(zhì)上只是對(duì)方法1的改進(jìn)

更優(yōu)雅的方法, 就是使用npx命令啦:

npx <包對(duì)應(yīng)的命令>

# 以less編譯為例:
npx lessc -v # 查看當(dāng)前項(xiàng)目下less編譯器的版本

使用場景2: 已全局安裝某個(gè)包, 項(xiàng)目又已安裝了不同版本的某個(gè)包, 想用項(xiàng)目的那個(gè)版本

以我今晚的踩坑作為第二個(gè)使用場景, 我本地已經(jīng)全局安裝了Vue腳手架的@2.x.x版本, 但是我想用并已經(jīng)在本地項(xiàng)目文件目錄中安裝了最新的@4.x.x版本, 即:

# 已經(jīng)執(zhí)行過
npm i -g vue-cli@2
vue -V # vue@2.9.6
# 已經(jīng)執(zhí)行過

cd my-project
npm i -D @vue/cli@4
vue -V # vue-cli@4.5.13

這時(shí), 如果使用vue -V會(huì)發(fā)現(xiàn)使用的是全局的版本, 因?yàn)閚pm默認(rèn)會(huì)執(zhí)行全局中的包。如果想使用項(xiàng)目已經(jīng)安裝的那個(gè)版本就直接執(zhí)行如下命令:

npx <包對(duì)應(yīng)的命令>

# 以vue-cli為例:
npx vue create my-project

使用場景3: 不想全局或在項(xiàng)目中安裝某個(gè)包, 只想臨時(shí)使用

對(duì)于這種場景, npx就是必要的選擇。npx會(huì)將要用的下載到一個(gè)臨時(shí)目錄, 使用完畢后自動(dòng)刪除, 還是以Vue-Cli為例: 這次的我突發(fā)奇想想看看React腳手架的項(xiàng)目文件結(jié)構(gòu), 由于我還沒學(xué), 所以本地和全局都沒有安裝(只是臨時(shí)想用腳手架創(chuàng)建一個(gè)React項(xiàng)目)

npx create-react-app my-react-project #react腳手架將會(huì)在項(xiàng)目搭建完后自動(dòng)被刪除掉

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

如題所示, 這里以我突發(fā)奇想想使用Vue腳手架的@3.x.x版本, 但是我全局已經(jīng)安裝了@2.x.x版本

cd my-vue-project   # 進(jìn)入我的vue項(xiàng)目
npx @vue/cli@3 create big-project   # 利用vue-cli的3.x版本創(chuàng)建一個(gè)名為big-project的項(xiàng)目

關(guān)于npx的一些參數(shù)

安裝并使用特定版本: npx 包@版本號(hào) 包對(duì)應(yīng)的命令
--no-install 強(qiáng)制使用本地包, 本地包如果沒安裝就會(huì)報(bào)錯(cuò): npx --no-install vue create my-project
--ignore-existing 強(qiáng)制安裝使用遠(yuǎn)程模塊: npx --ignore-existing vue create my-project
-p 對(duì)于一次性安裝多個(gè)包,使用參數(shù)-p: npx -p @vue/cli -p less 切記: 安裝多個(gè)包一定要使用 -p
-c 在一次性安裝并使用多個(gè)包的場景中: 在低版本下執(zhí)行npx -p vue-cli -p less lessc -v & vue -V命令, 有可能只有第一個(gè)命令項(xiàng)能正常執(zhí)行, 即:只打印出less編輯器的版本。npx的參數(shù)-c就是為了告訴npx執(zhí)行指定的所有命令的范圍: npx -p vue-cli -p less -c "lessc -v & vue -V", 這樣就能保證絕對(duì)的安全了。注: &代表兩個(gè)命令都執(zhí)行, |代表前面執(zhí)行成功后面命令就不執(zhí)行

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

到此這篇關(guān)于Node.js中npx命令的使用方法、場景的文章就介紹到這了,更多相關(guān)Node.js npx命令使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: