Laravel MixからViteに移行する

Laravel 6から9へアップグレードしたので、これまで利用していたLaravel Mixから、Laravel 9でデフォルトで採用されている「Vite」に移行してみます。
Vite | Next Generation Frontend Tooling
ちなみにViteの読み方は「ヴィート」のようです。

今回は、以下の移行ガイドを参考にして作業を進めてみます。
vite-plugin/UPGRADE.md at main · laravel/vite-plugin

プラグインのインストール

初めに、viteとLaravelのviteプラグイン「laravel-vite-plugin」をインストールします。

> npm install --save-dev vite laravel-vite-plugin

VueやReactを使用する場合、それぞれのプラグインをインストールします。

> npm install --save-dev @vitejs/plugin-vue

> npm install --save-dev @vitejs/plugin-react

Vite設定ファイルの追加

プロジェクトのルートディレクトリに、Viteの設定ファイル「vite.config.js」を新規作成します。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
	plugins: [
		laravel([
			'resources/css/app.css',
			'resources/js/app.js',
		]),
	],
});

VueやReactを使用する場合は、以下のように設定ファイルに記述します。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
	plugins: [
		laravel([
			'resources/css/app.css',
			'resources/js/app.js',
		]),
		react(),
		vue({
			template: {
				transformAssetUrls: {
					base: null,
					includeAbsolute: false,
				},
			},
		}),
	],
});

npmスクリプトを編集

package.jsonを開き、スクリプトを編集します。
以下は既存のLaravel Mixのコマンドです。

    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },

これらを以下のViteのコマンドに書き換えます。

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

bladeテンプレート調整

bladeにソースを組み込む際、Laravel Mixではビルドされたファイルをヘルパーmix()で組み込んでいました。

<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<script src='{{ mix('/js/app.js') }}'></script>

viteでは@viteを使い、ビルド前のファイルパスを指定します。

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

Laravel Mixを削除

Laravel Mixのパッケージを削除します。

> npm remove laravel-mix

また、Laravel Mixの設定ファイル「webpack.mix.js」を削除します。

ビルドコマンド

以上で一通り準備が整いました。
開発時は、以下のコマンドでViteサーバを起動してファイルの変更を監視します。

> npm run dev

本番ようにソースをビルドする場合は、以下のコマンドを実行します。

> npm run build

Laravel Mixに比べて処理が軽いと評判ですが、本当に早いですね！
開発が進みそう。

その他の補足

.gitignoreの変更

ソースをGitで管理している場合、ビルドで出力するファイルは管理外に指定しておいたほうがよいでしょう。
「.gitignore」に以下を追加します。

/public/build

ホットリロード機能

「npm run dev」を実行中は、対象のCSSやJSファイルに変更があると自動でブラウザが更新されるのですが、WindowsのWSL環境では機能しない場合があるようです。
その場合は「vite.config.js」に以下の設定を追加すると、ホットリロードが効くようになります。

export default defineConfig({
...
	server: {
		watch: {
			usePolling: true
		}
	}
});

開発環境でCSS sourcemap有効

以下のパラメータをtrueにすることで、開発時のみCSSのsourcemapを有効にすることができます。

export default defineConfig({
...
	css: {
		devSourcemap: true
	}
});