npm 與 npx 之間的關係

前言

之前在看 react 的官方文件時，文中在建立一個新的 react 專案有使用到一條指令：npx create-react-app my-app，當時沒特別想說它是做什麼用的，就先照做吧～這幾天剛好有機會碰到了，在這邊做個筆記。

npx 是 npm v5.2.0 開始加入的一個指令，也是一個 CLI 工具

這邊就拿 create-react-app 來舉例

以 npm 的方式來建立：

$ npm install -g create-react-app
$ create-react-app my-app

以 npx 的方式來建立：

$ npx create-react-app my-app

區別在於 npm 會在本機全域安裝 create-react-app，一直存在於本機的 node_modules 資料夾下，以後建立 react 專案直接執行 create-react-app 命令就行了；而使用 npx 它會安裝在臨時安裝包上，執行完成後就會被刪除

這裡用測試工具 Mocha 來舉例

$ npm install -D mocha

此時要呼叫 Mocha 一般來說會透過以下兩種方式：





{
    "scripts": {
         "mocha": xxxx
    }
}

$ node_modules/.bin/mocha --version

npx 解決了這個問題，讓專案內部安裝的模組/套件使用起來更方便，只要使用下面的方法呼叫就可以了

$ npx mocha --version

簡單來說 npx 執行時會到 node_modules/.bin/ 路徑內和環境變數 $PATH 檢查命令是否存在

npx 可臨時性的安裝非全域性套件，省下許多安裝及使用的流程與步驟，節省硬碟空間，也不用擔心長期的汙染