[Vite 原始碼解讀] npm run dev 之後...

https://ithelp.ithome.com.tw/users/20065770/ironman/6302

我們這集繼續來看看 Vite 的原始碼，這集主要是想要看看當使用 Vite 創建專案後，執行 npm run dev 指令的時候，背後究竟發生了什麼事。我們用一個全新的 Vue 專案為例，來實際了解這個過程。

建立專案後，執行 npm run dev 指令便會啟動 Vite 開發伺服器。實際上，這個指令執行的是一個名為 vite 的程式，而 vite 程式可以在專案的 node_modules/.bin/ 目錄裡找到。就會發現 vite 程式實際上是一個 Symbolic Link（符號連結），它指向 node_modules/vite/bin/vite.js 檔案。再進一步往下追，會發現在它會 import 一個 cli.js 檔案。這個檔案是 Vite 的命令列介面程式的入口點。當我們執行 npm run dev 時，它會建立一個 cli 物件，使用名為 cac 的套件來處理命令列參數。

cac 是一個簡單但功能強大的框架，可以用來建立命令列工具。當我們執行 npm run dev 時，cli 物件會解析命令列參數，並根據參數執行相應的動作。

接下來，我們還能看到原始碼中有一個 server 模組，負責建立和管理開發伺服器。不過，這部分的詳細內容我們會在後續的影片中再繼續深入探討。

總結來說，當我們執行 npm run dev 指令時，實際上是通過一個名為 vite 的程式，使用 cac 框架來處理命令列參數，然後根據參數執行相應的動作，最終啟動一個開發伺服器。

參考資料：

cac: https://www.npmjs.com/package/cac

#vite #原始碼解讀 ... https://www.youtube.com/watch?v=tPbdOzO-NH8