上一篇最後停在這裡：

npm run dev
↓
npm 讀 package.json
↓
找到 scripts.dev
↓
得到 "vite"
↓
node_modules/.bin 排進 PATH 前面
↓
shell 找到 node_modules/.bin/vite

Day 2 先解決了「shell 去哪裡找 vite」。

但我還是不知道：

node_modules/.bin

到底是什麼？

這篇直接打開它看。

.bin 本身其實是一個資料夾

一開始看到：

node_modules/.bin

我下意識會覺得它像某個執行檔。

但 .bin 本身就是一個資料夾。前面的 . 讓它在 macOS／Linux 裡通常被當成隱藏項目。

可以先輸入：

ls -ld node_modules/.bin

你應該會看到它是一個 directory。

接著再看看裡面有什麼：

ls node_modules/.bin

可能會看到：

vite
eslint
...

所以這篇先把它理解成：

專案裡 npm 套件提供的 command 入口集中區。

.bin 本身不是 executable；裡面的 vite、eslint 這些項目才是可以被 shell 找到的 command 入口。

跟著做 1：看 .bin/vite 到底是什麼

輸入：

ls -l node_modules/.bin/vite

在 macOS／Linux 上，常會看到類似：

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

先不要急著背 symbolic link 這個詞。

只看箭頭就好：

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

這表示 .bin/vite 並不是另一份完整的 Vite。

它比較像一個入口，最後會帶到 Vite 套件裡真正的執行檔：

node_modules/vite/bin/vite.js

跟著做 2：真的去看那個檔案

既然剛剛看到它指向：

../vite/bin/vite.js

那就直接去確認：

ls node_modules/vite/bin

你應該會看到：

vite.js

這時候可以把兩邊放在一起：

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

到這裡，「.bin/vite 是入口」這句話就不是抽象比喻了，是你真的從檔案結構看出來的。

那 npm 怎麼知道要建立一個叫 vite 的入口？

這時候才來看 Vite 自己的 package.json。

注意，這不是我們專案根目錄那份 package.json。

我們自己的在：

vite-why-lab/package.json

Vite 套件自己的在：

vite-why-lab/node_modules/vite/package.json

如果你用 VS Code，可以沿著：

node_modules
└── vite
    └── package.json

點進去。

或者直接用 Terminal：

cat node_modules/vite/package.json

內容很多，可以搜尋 "bin"。

你會看到類似：

"bin": {
  "vite": "bin/vite.js"
}

這段先讀成一句話就好：

Vite 這個 npm 套件提供一個叫 vite 的 command，而它的入口檔是 bin/vite.js。

也就是：

"vite"            // command 名稱
   ↓
"bin/vite.js"     // 套件內的執行入口

所以安裝 Vite 時，npm 可以依照這個 bin 資訊，準備對應的 command 入口，讓專案中可以找到：

node_modules/.bin/vite

而它最後指向：

node_modules/vite/bin/vite.js

換一個假的例子就更好懂

如果某個套件的 package.json 寫：

"bin": {
  "hello": "abc/run.js"
}

可以先理解成：

hello        // command 名稱
abc/run.js   // 套件裡真正的入口

所以 .bin 裡的 command 名稱，不一定要跟真正的檔名一樣。

把 Day 1～Day 3 全部串起來

現在可以從最一開始的：

npm run dev

一路走到真正的 Vite 入口：

npm run dev
↓
npm 讀專案的 package.json
↓
找到 scripts.dev = "vite"
↓
npm 執行 script 時準備 PATH
↓
node_modules/.bin 排在前面
↓
shell 找到 node_modules/.bin/vite
↓
.bin/vite 是 command 入口
↓
Vite 自己的 package.json 宣告：
"vite" → "bin/vite.js"
↓
最後連到 node_modules/vite/bin/vite.js
↓
Vite 被執行

三天前我只知道：

npm run dev = 網頁跑起來

現在至少可以沿著檔案和指令，一層一層找到它實際走去哪裡。

關掉文章後，自己再走一次

不要看上面的流程，試著完成這三個實驗：

ls -ld node_modules/.bin
ls -l node_modules/.bin/vite
cat node_modules/vite/package.json

然後回答：

1. `.bin` 本身是什麼？
2. `.bin/vite` 是完整的 Vite 嗎？
3. Vite 自己的 package.json 裡，哪個欄位告訴 npm command 名稱和入口檔的關係？

最後再試著閉卷補完：

npm run dev
↓
scripts.dev = "vite"
↓
PATH
↓
____________________
↓
____________________
↓
node_modules/vite/bin/vite.js

如果你能自己補出 node_modules/.bin/vite，以及「Vite package.json 的 bin 對應」，Day 1～Day 3 這條線就真的開始接起來了。

好累（晚安 ZZZZZ）