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

package.json 到底是什麼？

實作 1：直接讀 package.json 裡的資料

先進到前幾天的 Vite 專案：

cd vite-why-lab

或也可以用

npm create vite@latest vite-why-lab -- --template react

建立一個新的專案。

輸入：

npm pkg get name

這個指令的意思就是：
npm 從 package.json 裡面取得name資訊欄位。

你會看到類似：

"vite-why-lab"

打開 package.json，可以找到：

{
  "name": "vite-why-lab"
}

再試一次：

npm pkg get scripts.dev

結果應該會是：

"vite"

這時候就可以知道：

package.json = 資料
npm          = 讀資料、做事情的工具

package.json 自己不會執行程式。

當我們輸入：

npm run dev

npm 才去讀：

scripts.dev
↓
"vite"

然後接回前幾天追過的 Vite 執行流程。

實作 2：電腦裡這麼多 package.json，npm 讀哪一份？

先在專案根目錄輸入：

npm prefix

你會看到目前 package 的根目錄，例如：

/Users/你的帳號/.../vite-why-lab

接著進到子資料夾：

cd src
npm prefix

通常還是會得到同一個專案根目錄。

再試：

npm pkg get name

即使人在 src/，npm 還是知道自己正在操作 vite-why-lab 這個 package。

所以目前可以先理解成：

目前所在的位置
↓
npm 找到所屬的 package root
↓
讀那裡的 package.json

做完回去：

cd ..

實作 3：它不只記 scripts

輸入：

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

再打開 package.json 對照：

"dependencies": {
  "react": "..."
},
"devDependencies": {
  "vite": "..."
}

所以 package.json 不只是在記：

dev = vite

它也在描述這個 package：

我是誰                 → name
有哪些可以執行的工作   → scripts
需要哪些套件           → dependencies / devDependencies

現在我會先把它理解成：

package.json 是用 JSON 格式描述一個 package／專案的資料檔。

React 專案有自己的 package.json，Vite 也有自己的 package.json。有這個檔案不代表一定要發布到 npm；它首先是在描述「這個 package 是什麼」。

試試看吧？

先打指令：

npm pkg get name
npm pkg get scripts.dev
npm prefix
npm pkg get dependencies.react

然後回答：

1. package.json 是程式，還是資料？
2. npm run dev 裡的 dev 是從哪裡讀到的？
3. npm 怎麼知道目前正在操作哪個 package？

如果可以自己講出：

package.json 是資料
↓
npm 讀它
↓
依照欄位做不同的事情

晚安
一邊打瞌睡一邊學習，好累xd