コンテンツへスキップ

【Laravel】Laravel10でビルドツールをViteからLaravel Mixへ変更する方法

今回はLaravel10において、ビルドツールをViteからLaravel Mixへと変更する方法をご紹介します。

Viteが使えないサーバではLaravel Mixを使おう

Laravel9のバージョンからデフォルトのビルドツールとして、Viteがインストールされるようになっています。

ViteはNode.jsを使えるサーバでないと動作しないため、ビルドしたCSSやJSをViteのメソッドを利用して参照する場合はエラーになってしまいます。
（開発環境でビルドするだけであれば、Viteを使っても問題ありません。）

昨今のクラウドサーバやVPSであれば、Node.jsをインストールできるため全く問題はありませんが、レンタルサーバではNode.jsのインストールや安定稼働をサポートしているところはない（僕が把握する範囲では…）ため、Viteを利用したCSS、JSの参照を行えません。

そこでレンタルサーバでも利用できるビルドツールとして、Laravel Mixに変更してあげるのがおすすめです。

ViteからLaravel Mixへ変更する手順

手順１：Laravelプロジェクトの作成

composer  create-project laravel/laravel your-project
cd your-project

Laravelのプロジェクトを作成するため、上記のコマンドを実行し、プロジェクト作成後はプロジェクトディレクトリへと移動します。

既に作成済みのプロジェクトがある場合は必要ありません。

手順２：Laravel Mixをインストール

yarn add laravel-mix

Laravelプロジェクトディレクトリ内で、上記コマンドを実行し、Laravel Mixをインストールします。

手順３：Laravel Mix設定ファイルの作成

touch webpack.mix.js

Laravelプロジェクトドキュメントルートで上記コマンドを実行し、webpack.mix.jsファイルを作成します。

もちろんコマンド実行じゃなくて、GUIの操作で同ファイルを作成しても問題ないです。

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css');

そしてwebpack.mix.jsには上記のようにビルド設定を記述します。
ビルドするファイルの内容はそれぞれの環境に合わせて適宜変更してください。

手順４：Viteのアンインストール

yarn remove vite laravel-vite-plugin

上記のコマンドを実行し、デフォルトでインストールされているVite関連のライブラリをアンインストールします。

手順５：package.jsonの修正

{
    "private": true,
    "scripts": {
        "dev": "mix",
        "watch": "mix watch",
        "build": "mix --production"
    },
    "devDependencies": {
        "axios": "^1.6.4"
    },
    "dependencies": {
        "laravel-mix": "^6.0.49"
    }
}

次にpackage.jsonの修正を行います。

インストールしているライブラリなどは、それぞれの環境によって異なりますが、変更のポイントは以下の点です。

１．scripts ⇒ 各実行コマンドをviteコマンドからmixコマンドへと変更する。
２．type:moduleを削除する。

手順６：Vite設定ファイルの削除とVite関連メソッドの削除

rm -rf vite.config.js

最後にLaravelプロジェクトドキュメントルートにて、上記コマンドを実行してVite設定ファイルを削除してください。

そして既に作成されているソースファイル内でVite関連のメソッドを利用している箇所があれば、その記述を削除もしくは代替の記述に修正することでLaravel Mixへの切り替えが完了します。

まとめ

というわけで、今回はLaravel10環境においてビルドツールをViteからLaravel Mixへと変更する方法をまとめました。

モダン開発であればNode.jsを利用できる環境でのアプリケーション開発が当たり前になってきていますが、それでもNode.jsが使えないレンタルサーバでの開発を行うケースも決して少なくありません。

PHPのみで稼働できる環境構築の方法として、今回ご紹介した方法でビルドツールにLaravel Mixを利用することも覚えておいた方が良いかと思います。

タグ: