ブログ

Blog

Posted at: 2024-01-14

【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を削除する。