Laravel 環境に Vite + React を導入する

Laravel の環境はすでにあるもの、且つ以下のバージョンにて進めます。

$ php artisan -V
Laravel Framework 8.47.0

React を導入する

React の初期設定を laravel/ui を利用して行います。
単純に React を導入するだけで言えば以下の artisan コマンドだけで完結してしまいます。
ただ、本当に必要最小限のものしか入らないので、ここから必要なものを足していく形になります。

$ composer require laravel/ui --dev
$ php artisan ui react

webpack から Vite に移行する

現状のままだと Webpack Mix（Laravel Mix を利用した Webpack のラッパー） で JavaScript をバンドルするので、手を入れていきます。

laravel-vite で vite 環境をセットアップする

webpack-mix を省いて vite に設定を移行してくれるプリセットコマンドが用意されています。

$ npx apply laravel:vite

ただ、こちらは Vue.js にしか対応していません。
強制的に Vue の構成に変わってしまうので、 React 構成で行きたい場合は自前でセットアップしていく必要があります。

# Remove Mix
$ rm webpack.mix.js
$ npm uninstall laravel-mix

# Require the packages
$ composer require innocenzi/laravel-vite
$ npm install vite laravel-vite -D

vite.config.ts を用意して、package.json の npm scripts 部分を vite 用に書き換えます。

vite.config.ts

export { default } from "laravel-vite";

package.json

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

React Fast Refresh を導入する

vite 用のプラグインがあるので、インストールして設定します。

$ npm install @vitejs/plugin-react-refresh -D

vite.config.ts

import { defineConfig } from "laravel-vite";
import reactRefresh from '@vitejs/plugin-react-refresh';

export default defineConfig({
    plugins: [reactRefresh()]
})

参考

• laravel ui
• Introduction:laravel-vite