自分だけのクイズ作成 - Quipha公開中

【Laravel】ViteからLaravel Mixに戻す方法

Laravel
スポンサーリンク

はじめに

最新のLaravel9では、フロントエンド(JS,CSS)のビルドツールについて、従来のLaravel MixからViteへと置き換わりました

基本的にはViteで開発を進めると良いと思いますが、従来のLaravel Mixへ戻す手順を解説します。

使用するバージョン
  • Windows 11 or macOS Monterey (M1)
  • Laravel Framework 9 or 10

WindowsでもMacでも同様にできます。
2023/03/11 Laravel10で確認しました。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

以下の記事を参考にしました。

vite-plugin/UPGRADE.md at main · laravel/vite-plugin
Laravel plugin for Vite. Contribute to laravel/vite-plugin development by creating an account on GitHub.

Laravelプロジェクトの導入

今回はLaravel Sailを使って、Laravelプロジェクトを作成します。
構築手順については、以下の記事を参考にしてください。

Windows
Mac

Viteでビルド

まずはViteを確認しましょう。

標準ではViteが導入されていますので、以下のコマンドでビルドを行い、ファイルを出力することができます。

sail npm run build

開発時には以下のコマンドで実行することができます。

sail npm run dev

Viteについては以下の記事にもまとめました。

スポンサーリンク

Laravel Mixに戻す

では、本題です。
ビルドツールをViteではなく、従来のLaravel Mixに戻してみます

以下のコマンドでMixをインストールします。
SailでNPMコマンドを実行します。

sail npm install --save-dev laravel-mix

package.jsonファイルに、”laravel-mix”が追加になります。

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^0.27",
        "laravel-mix": "^6.0.49",
        "laravel-vite-plugin": "^0.6.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.0.0"
    }
}

プロジェクト直下に、webpack.mix.jsファイルを作成し、以下の内容にします。

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', [
        //
    ]);

package.jsonファイルを開き、“scripts”部分のviteの記述を削除し、以下のようにMixを追加します。

{
    "private": true,
    "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"
    },
    "devDependencies": {
        "axios": "^0.27",
        "laravel-mix": "^6.0.49",
        "laravel-vite-plugin": "^0.6.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.0.0"
    }
}

.envを開き、以下のViteに関する記述を削除します。

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

.evnにMixに関する記述を追加します。

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Bladeも修正します。以下のようなViteの記述を削除します。

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

MixでビルドしたJSやCSSを読み込むには、Bladeファイルに以下のように記述します。

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

以下のNPMコマンドで、Viteを削除します。

sail npm remove vite laravel-vite-plugin

package.jsonからViteが削除され、以下のようになりました。

{
    "private": true,
    "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"
    },
    "devDependencies": {
        "axios": "^0.27",
        "laravel-mix": "^6.0.49",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14"
    }
}

最後に、vite.config.jsファイルを削除します。

Mixを使う

以下のコマンドで、開発用のビルドを行います。

sail npm run dev

本番環境用のファイルを出力する場合は、以下のコマンドを実行します。

sail npm run prod

以下の画面が表示され、ビルドが完了しました。

publicフォルダにapp.js、app.cssファイルが出力されていることを確認しましょう。

その他

初学者へ

Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう!
Laravelアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

さいごに

今回は、Laravel標準のViteをLaravel Mixに戻す手順を解説しました。

戻したい場合は、是非参考にしてみてください。

\オススメ/

コメント

タイトルとURLをコピーしました