# 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 一般來說會透過以下兩種方式：

1. 對 package.json 裡的 script 進行設定

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

2. 透過 CLI 來進行呼叫(於專案根目錄下執行)

$ node_modules/.bin/mocha --version

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

$ npx mocha --version

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

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

## 參考資料
[https://www.ruanyifeng.com/blog/2019/02/npx.html](https://www.ruanyifeng.com/blog/2019/02/npx.html)
[https://juejin.cn/post/6844903945664462855](https://juejin.cn/post/6844903945664462855)
[https://blog.csdn.net/zheng18237111686/article/details/113933072](https://blog.csdn.net/zheng18237111686/article/details/113933072)
[https://medium.com/itsems-frontend/whats-npx-e83400efe7f8](https://medium.com/itsems-frontend/whats-npx-e83400efe7f8)

###### tags: `nodejs` `npm` `npx`