西村祐真

@variant3a

はじめに

環境

手順

Laravel MixからViteに移行する

2023-02-13

#Laravel #Livewire #Vite

はじめに

Laravel 9.xでlaravel-mixからviteに変更されたので、今回はviteへの切り替え方法を記す。
なお、vueやreactを導入している方は別途プラグインを入れる必要があるので、詳しくは以下のリンク先を参照してほしい。
Upgrade Guide - laravel/vite-plugin

環境

Laravel 9.x

手順

1. viteインストール

viteとlaravel用のプラグインをインストールする

npm i --save-dev vite laravel-vite-plugin

2. `vite.config.js`の作成

viteの構成ファイルを作成する。

ポイント

refreshでパスを指定すると、ファイルを保存した際に自動でコンパイルしてブラウザをリロードしてくれる
エイリアス@等はlaravel-mixと同様に、laravel-pluginを入れた場合は自動的に登録されるため、記述しなくて良い。
commonJsOptionsでは、cjsをコンパイルする際に指定する。(viteではesmベースでコンパイルするため)
WSL2の環境で使用する場合はserver部分を記述する。

自分の場合では特に、commonJsOptionsを対応させるために一苦労した。詳細は後述

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.sass',
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
    build: {
        commonjsOptions: {
            include: [
                /node_modules/,
            ],
        },
    },
    server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost'
        },
    },
})

3. `package.json`を更新する

今までのlaravel-mix用のコマンドをすべて削除して、vite用に書き換える。

  "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"
+     "dev": "vite",
+     "build": "vite build"
  }

4. 環境変数を更新する

- MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
- MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+ VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+ VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

5. `mix()`から`@vite`へ置き換える

app.blade.php等のインポート指定をvite用にする。
この際、jsもcssも削除して、一つの@viteにまとめることができる。

- <link rel="stylesheet" href="{{ mix('css/app.css') }}">
- <script src="{{ mix('js/app.js') }}" defer></script>
+ @vite(['resources/css/app.css', 'resources/js/app.js'])

6. laravel-mixを削除する

npm remove laravel-mix
rm webpack.mix.js

7. ビルド

さあ、早速ビルドしてみよう。
今までのwatchコマンドの動作は、devコマンドと同等。

npm run dev

動かない

おそらく、多くのプロジェクトではcjsのプラグイン等を使用しているかと思うので、この手順のみでは動作しないと思う。
ちょっと修正が必要。

1. cjsへの対応

当方の環境では、livewire-turbolinksをnode_modules経由でincludeしていたが、どうやらそれがcjsだったのでうまくコンパイル出来なかった。（node_modules/配下は自動的にcjs→esm変換してくれるらしいが、動作しなかったっぽい）
なので、以下のように修正した。

1. `vite.config.js`の修正

コメントに追加とした部分が追加箇所

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    optimizeDeps: { // 追加
        include: [
            'livewire-turbolinks',
        ],
    },
    plugins: [
        laravel({
            input: [
                'resources/sass/app.sass',
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
    build: {
        commonjsOptions: {
            include: [
                /livewire-turbolinks/, // 追加
                /node_modules/,
            ],
        },
    },
    server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost'
        },
    },
})

2. `app.js`の修正

app.jsからlivewire-turbolinksを読み込んでいる部分を削除する。（viteで読み込まれるので）

- import * as Turbolinks from 'livewire-turbolinks/dist/livewire-turbolinks'

以上で大抵は動作すると思う。

移行した感想

やっぱり前から聞いていた通り、コンパイルがかなり早い。前触れの通りに10倍とか100倍とか出ていると思う。（というか"コンパイル中"みたいな表示がない。）
さらにbrowsersyncを導入しなくても爆速でリロードされて反映するのが良いと思う。保存→リロードの手癖は抜けないけど。

今回は当方の環境での対応方法を記載したが、vueやreactを使用している方は追加でプラグインを導入する手順があるので、詳しくはリンク先を参照してほしい。

ということで、みなさんもlaravel-mixからviteへ切り替えよう。

#Laravel #Livewire #Vite

2023-02-13