十年前商學院半路出家，第一次被叫去架網站時，查資料不小心查到全棧，從 FileZilla 入坑，結果踩了個大坑。後來上課跟著做作品，總算也開始碰 React（暈

建立專案時，打開終端機，輸入：

npm run dev

然後終端機印出網址，點開後網頁就跑起來了。

以前的我大概只知道：這行可以讓專案啟動。再問下去，例如 npm 是誰、dev 是什麼、為什麼打完會出現網頁，我就會開始放空。

這篇先不急著背定義。我想直接拆一遍，而且真的動手改一個地方看看。

如果你也想跟著做

手邊如果已經有 Vite／React 專案，直接進到專案資料夾就可以。

如果沒有，可以另外建立一個練習用的小專案：

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

這三行先當成準備環境就好。npm install 到底做了什麼，後面再拆，不然第一天就會拆到天荒地老 XD

先不要跑 dev，先跑一次 npm run

在專案資料夾裡輸入：

npm run

這次後面不要接 dev。

npm 會列出這個專案有哪些 scripts。不同專案不一定完全一樣，但 Vite 專案通常會看到類似：

dev
  vite

build
  vite build

接著打開專案根目錄的：

package.json

找到 scripts：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

這時候先不要急著往下看，自己對一次：

npm run dev
        ↓
package.json 的 scripts.dev
        ↓
"vite"

原來 npm run 不是直接「啟動 React」。npm 會先看這個專案寫了哪些工作，再去執行你指定的那一個。

跟著做：把 dev 改名看看

我以前最容易誤會的是：

dev 是不是 npm 內建的一個「開發模式」？

最簡單的方法不是背答案，而是直接改掉它。

先把：

"dev": "vite"

暫時改成：

"haha": "vite"

存檔後輸入：

npm run haha

如果 Vite 一樣啟動，這個實驗至少可以告訴我們一件事：

dev 不是 npm 規定死的神祕關鍵字，它是 scripts 裡的一個名稱。

做完可以把它改回：

"dev": "vite"

不然下一篇我會一直叫你輸入 npm run dev，結果你只剩 haha XD

把三個字拆開看

到這裡，我先把：

npm run dev

讀成：

• npm：處理 npm 套件與 scripts 的工具。
• run：請 npm 執行一個 script。
• dev：這次要執行的 script 名稱。

白話一點就是：

npm，請你執行這個專案裡叫做 dev 的工作。

而這個專案裡：

"dev": "vite"

所以 npm 讀到的下一步其實是：

執行 vite

那網頁為什麼真的跑起來？

因為這個專案把 dev 指到 Vite。

當 Vite 被執行後，它會啟動開發用的本機伺服器，終端機才會顯示 localhost 網址。瀏覽器打開那個網址後，我們才看到正在開發的畫面。

這裡先把 React 和 Vite 分成兩個角色：

• React：負責 UI 怎麼描述、資料變動後畫面怎麼更新。
• Vite：負責目前這個專案的開發伺服器與開發環境。

以前我只記得「打完這行，React 就活了」。現在至少知道，中間其實先經過 npm 和 package.json。

今天先串到這裡

npm run dev
↓
npm 讀 package.json
↓
找到 scripts.dev
↓
取得 "vite"
↓
執行 vite
↓
Vite 啟動開發伺服器

但是新的問題也跑出來了。

package.json 明明只寫：

"dev": "vite"

又沒有寫完整路徑。

那電腦到底怎麼知道 vite 在哪裡？

下一篇繼續。

試試看

先不要看上面的答案，試著完成兩件事：

1. 把 "dev": "vite" 改成另一個名稱，確認新的 npm run 名稱 能不能啟動 Vite。
2. 補完下面這條流程。

npm run ______
        ↓
package.json 的 scripts.______
        ↓
取得命令 ______