Day 5，我已經知道 package.json 裡面記錄了專案需要的套件。

例如我的 vite-why-lab 裡有：

{
  "dependencies": {
    "react": "^19.2.8"
  },
  "devDependencies": {
    "vite": "^8.2.2"
  }
}

我也可以直接叫 npm 把資料讀出來：

npm pkg get dependencies.react
npm pkg get devDependencies.vite

實際得到：

"^19.2.8"
"^8.2.2"

npm 都已經知道專案需要 React 和 Vite 了，那我直接執行 npm run dev，它是不是就可以自己處理？

直接把 node_modules 暫時移走看看。

我原本把兩件事混在一起了

我原本的理解是：

npm run dev
↓
npm 讀 package.json
↓
找到 scripts.dev = "vite"
↓
看到專案需要哪些套件
↓
安裝後啟動 Vite

前半段其實沒錯：

npm run dev
↓
npm 讀 package.json
↓
找到 scripts.dev
↓
得到 "vite"

但「自動安裝套件」真的是 npm run dev 的工作嗎？

實驗 1：沒有 node_modules，還能啟動嗎？

我的專案原本已經執行過 npm install，所以裡面有：

node_modules/

先把它改名：

mv node_modules node_modules.backup

這時候 package.json 還在，裡面也仍然寫著：

{
  "scripts": {
    "dev": "vite"
  }
}

接著執行：

npm run dev

實際結果是：

> vite-why-lab@0.0.0 dev
> vite

sh: vite: command not found

前面兩行表示 npm 有成功讀取 package.json，找到 scripts.dev，也得到 "vite"。

但 node_modules 已經被我改名，原本放在裡面的 Vite command 入口也不見了：

node_modules/.bin/vite

所以package.json是清單，裡面有寫dev:vite，不一定有node_modules。
反正就是npm install會再安裝需要的dependencies就是惹。

實驗 2：執行 npm install

接著輸入：

npm install

結果輸出：

added 25 packages

再檢查 node_modules：

ls -ld node_modules
ls -l node_modules/.bin/vite

結果裡可以看到新的 node_modules 已經出現，而 Vite 的入口也重新建立了：

node_modules/.bin/vite -> ../vite/bin/vite.js

也就是：

node_modules/.bin/vite
↓
node_modules/vite/bin/vite.js

實驗 3：現在可以啟動了嗎？

再次執行：

npm run dev

這次成功了：

VITE v8.2.2 ready in 869 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help

同樣一份 package.json，第一次失敗，第二次成功，差別就在 npm install 已經重新建立了 node_modules。

npm install 和 npm run dev 是兩件事

npm install 負責準備專案需要的相依套件：

npm install
↓
npm 讀取專案的套件資料
↓
確認需要安裝哪些套件
↓
建立 node_modules
↓
準備 node_modules/.bin/vite 等 command 入口

如果專案裡已經有 package-lock.json，npm 安裝時也會參考它。(它和 package.json 到底差在哪裡，之後再說)

npm run dev 則負責執行 package.json 裡的 dev script：

npm run dev
↓
npm 讀取 scripts.dev
↓
得到 "vite"
↓
shell 找到 node_modules/.bin/vite
↓
Vite 啟動

所以：

npm install 負責把需要的工具準備好，npm run dev 負責執行已經準備好的工具。

npm install 本身不會替我啟動網站，npm run dev 也不會因為發現缺少 Vite，就自動替我安裝。

為什麼剛拿到專案通常要先 npm install？

當我們從 GitHub 取得一個專案時，通常會拿到：

package.json
package-lock.json
src/
其他程式碼……

但是通常不會拿到：

node_modules/

也就是：

專案需要哪些套件的資料還在
↓
實際安裝的套件不在

所以第一次執行專案前，通常要先輸入 npm install，把需要的套件安裝回來，完成後再執行 npm run dev。

把今天的實驗重新走一次

package.json 裡寫著 scripts.dev = "vite"
↓
暫時移走 node_modules
↓
npm run dev
↓
npm 成功讀到 "vite"
↓
但找不到 node_modules/.bin/vite
↓
vite: command not found
↓
npm install
↓
重新建立 node_modules 與 node_modules/.bin/vite
↓
npm run dev
↓
Vite 成功啟動

最容易搞錯的地方

package.json 有寫 Vite，就代表 Vite 已經安裝了

不是。package.json 記錄專案需要什麼，實際安裝的套件則放在 node_modules。

npm run dev 發現沒有套件，就會自動安裝

不會。它會讀取 scripts.dev 並嘗試執行 vite；如果找不到 Vite，就會出現 vite: command not found。

npm install 會啟動網站

也不會。它負責安裝相依套件；要啟動 Vite，還是要另外執行 npm run dev。

如果今天只記得一件事

package.json 告訴 npm 專案需要什麼；npm install 才把需要的套件準備到 node_modules。

試著不看答案回答

1. 為什麼沒有 node_modules 時，npm 仍然知道 dev 對應到 vite？

2. 為什麼 npm 知道要執行 vite，最後卻還是出現 command not found？

3. npm install 和 npm run dev 的工作有什麼不同？

我現在的回答是：

npm install 會安裝專案需要的相依套件。

npm run dev 會讀取 scripts.dev，
找到並執行 Vite。

週日時不要命的跟老闆提離職了，但應該還是留下來了
今天出差開一整天的車，半路接到三個月大的嫩嬰發燒
今天...挪了幾十分鐘整理這個筆記，每天都在準備放棄的路上xd 晚安