Laravel Vite：繼 Laravel Mix 之後新的前端檔案管理工具

本站的主題是商業，創業，美食，葡萄酒，閱讀，網路科技。

這是我的 FB粉專以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~

從 Laravel 5.4 開始 (2017/1/24)，前端檔案管理工具就是 Laravel Mix，我當年還有一篇關於 Laravel Mix 的文章

Laravel 9.19 開始 (2022/6/30)，Laravel 前端檔案管理工具從 Laravel Mix 改為 Vite。

每次寫關於軟體工程演進類的文章，都會有感於時間過得真的太快。2017~2022，五年多就這樣過去了。五年的時間，希望大家在人生中都有累積些什麼。

Laravel Mix 的底層是 Webpack，在 Laravel 根目錄會有 package.json, webpack.mix.js 兩支檔案。執行

npm install

會依照 package.json 去安裝套件到你的開發環境。

package.json 中有一個 “scripts” 欄位，定義了很多 npm 指令，並將 npm 指令轉成 mix 指令。mix 指令就會去跑 webpack.mix.js 這支檔案裡的 script，包含 compile css / js。

Laravel Vite 是基於 Vite，是一個基於原生 JavaScript ESM 的前端開發工具。與 Webpack 機制上不同的是，Webpack 一律依照 script 打包全部檔案素材 (dev mode 也是打包全部)。

而 Vite 在熱更新時 (hot module replacement，HMR)，是先 refresh 瀏覽器，檢查現在前端頁面有關的檔案是否有更新，如果有，才編譯與該頁面有關的檔案 (而不是每次都全部打包)。因此在開發階段，尤其是大型專案，會大幅加速開發時間。

Laravel Vite 一樣有 package.json，一樣要跑 npm install。只是根目錄 script 檔案不是 webpack.mix.js，改為用 vite.config.js。

Laravel Vite 的 package.json 中一樣有 “scripts” 欄位：

npm run dev  // 轉成 “vite”
npm run build  // 轉成 "vite build"

vite 指令就會去跑 vite.config.js 這支檔案裡的 script，預設是

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

入口的 css / js 一樣是 resources/sass/app.scss, resources/js/app.js。注意有一個設定 refresh: true，這代表在執行 npm run dev 時，如果底下這幾個路徑檔案有更新

app/View/Components/**
lang/**
resources/lang/**
resources/views/**
routes/**

瀏覽器已 load 的頁面會整頁 refresh。以上是預設的監聽路徑，你也可以將自己想監聽的檔案路徑設定給 refresh 參數 (以設定 array 代替 true)，這樣 Vite 就會監聽你定義的路徑。

跟之前一樣 app.scss 中預設 import 隔壁的 _variables.scss。

app.js 中預設 import 隔壁的 bootstrap.js，在其中 load 你需要的套件，例如：jQuery，Bootstrap，Vue，等。

在前端檔案加一行 (與 Mix 不同，Vite 引用 css / js 在同一行)

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

就可以將 compile 好的 css / js 引入 (並加 preload 屬性)。如果是 Build Mode (npm run build)，css / js 檔名會加上版本號 (auto-versioning)。

目前如果先安裝 laravel/ui，build 出來的 css / js 會包含 Bootstrap 5.2.3，是目前 (2022年12月) Bootstrap 的最新版。

Vite 也可以處理前端素材檔案，例如圖檔跟字型檔。在 JS 的入口處 (app.js) 寫入

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

執行 npm run build，這樣 Vite 就會將素材檔名編碼過，並移到 public folder 底下。前端要用素材檔可以這樣寫

<img src="{{ Vite::asset('resources/images/logo.png') }}">
{{-- <img src="http://your-url.com/build/assets/logo.1234ooxx.png"> --}}

結論

從 Webpack 到 Vite，底層是完全不同了。但可以看出來 Laravel Vite 創作時，作者盡量不動 Laravel 的架構，與之前一樣的 css / js 入口檔案。

Vite config 當然有一些獨立的功能和寫法。既然 Laravel 決定改用 Vite 了，我們應該也要隨之學習和習慣 Vite 的使用。

本站的主題是商業，創業，美食，葡萄酒，閱讀，網路科技。

這是我的 FB粉專以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~

結論

延伸閱讀