Laravel Vite frontend 前端 CSS JS
Laravel 前端工程

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

商業,創業,業務,職涯,美食,葡萄酒,閱讀,網路科技。

從 Larry 創業以及商業的經驗,希望以白話的口吻,介紹給大家這個商業的世界。

FB粉專會頻繁地分享以上主題,我最近也滿常使用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 的使用。

商業,創業,業務,職涯,美食,葡萄酒,閱讀,網路科技。

從 Larry 創業以及商業的經驗,希望以白話的口吻,介紹給大家這個商業的世界。

FB粉專會頻繁地分享以上主題,我最近也滿常使用Threads,歡迎大家追蹤互動~