[NodeJS] npx 是什麼? 跟 npm 差在哪?

itsems
itsems_frontend
Published in
4 min readJul 5, 2020
Photo by Kelly Sikkema on Unsplash

最近在研究 Nuxt, 接觸到 npx 這個指令,之前就偶爾看過幾次,這次就順手整理起來。

npm vs npx

假定在閱讀的你,對於 npm 有一點使用的經驗,所以你也會知道,Npm(node package manger) 是套件管理工具,讓你在開發過程中,可以把想要的 node 套件,透過 npm 安裝在 local 專案位置或是 global 全局性整台電腦的環境下面。

但是這樣的情境你一定也不陌生:

我只是想要測試一下這個套件是不是我要的,可是我一定要把他安裝下來

這就是 npx 用處所在了。

npx 是在 npm v5.2.0 之後內建的指令,也是一種 CLI 工具,讓我們可以更方便的安裝或是管理依賴(dependencies),就來看看 npx 可以怎麼幫助我們,以及和 npm 主要的差異在哪裡。

npm 永久安裝,npx 安裝後即移除

舉例,我要建立一個 Nuxt.js App

以 npm 的方式建立:

$ npm install -g create-nuxt-app // 安裝一個叫 create-nuxt-app 的套件
$ create-nuxt-app my-nuxt-app // 使用這個套件初始一個nuxt app起來

以 npx 的方式建立:

$ npx create-nuxt-app my-nuxt-app

npm 會全局性的安裝 create-nuxt-app,這個 dependency 也會一直存在在你的本機 node_modules 下,如果使用 npx 命令,他會安裝在臨時安裝包上,等到項目初始化完成後就刪除,不用全局性的安裝,避免被汙染

更方便的運行本地套件

當你想要運行一個本機已經安裝的套件,可以只要輸入:

$ npx your-package

npx 會去確認這個 command 或是 package 有沒有存在你的系統變數 $PATH 中,如果都沒有,就會自行安裝

直接執行 Github 檔案

Github 上的 repository 和 gists 可以透過 npx 直接執行,npm 不行,只要在根目錄有建立好 package.json 檔案,再直接執行 npx 即可,

這裡 我建立了一個 gits 作範例,只要在你的 terminal 輸入:

$ npx https://gist.github.com/itsems/ed6cebf796a470059c7eb25fdfcaa085

就會得到我在 index.js 中寫的的 Hi there

測試不同版本的套件

假設我們想要測試不同版本的 create-react-app :

$ npm v create-react-app

我們可以看到這個套件目前幾種版本為:

如果想要測試下一個版本 next 的話:

$ npx create-react-app@next my-next-react-app

npx 就會幫我們安裝好下一個版本的 create-react-app 並建立好一個 react app 在指定的位置了

總結

  1. npx 可以臨時性的安裝非全局性必要的套件,省下許多安裝及使用的流程與步驟、省下了磁碟空間,也避免了長期汙染
  2. 提供了更簡便的方式使用套件,可以執行 Github 的 gists 和 repositories
  3. 可以指定套件版本,解決了不同項目不同版本的問題
內容若有任何錯誤,歡迎留言交流指教! 🐬

Related Links:

ref:
npm vs npx — What’s the Difference?
npx和npm之間的關係

--

--

itsems
itsems_frontend

Stay Close to Anything that Makes You Glad You are Alive.