LaravelからViteをアンインストールしてLaravel Mixを入れる方法

2022年6月末から、新規でLaravelをインストールすると、Laravel Mixではなく、Viteが自動で入ります。

本記事では、ViteをアンインストールしてLaravel Mixにしたい、という場合の方法を解説していきますね。

なお実行した環境は下記のとおりです。Vue.jsは使っていませんが、使う場合には、また他の設定も必要です。環境が異なると、記事通りの設定ではうまくいかない可能性があります。

Laravelバージョン9.19.0
Breezeパッケージをインストールした直後の開発環境
Breezeパッケージにデフォルトで入っているTailwind CSSを利用
Node.jsインストール済み

LaravelからViteをアンインストールする方法
LaravelにLaravel Mixを入れる方法
本記事を書いた理由
さいごに

LaravelからViteをアンインストールする方法

①Vite削除コマンドを実行

npm remove vite

 npm remove laravel-vite-plugin

②Vite設定ファイル（vite.config.js) 削除

VS Codeご利用の場合、プロジェクトの下のほうにファイルがあります。

③ テンプレートファイルのリンクを無効にする

resources/views/layouts/app.balde.php と resources/views/layouts/guest.blade.phpに

自動で入っている下記のコードを無効にします。

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

④ package.jsonの変更

package.jsonのscriptsで、下記を削除します。

"dev": "vite",
"build": "vite build"

⑤ jsファイルの修正

resources/views/js/app.jsを書き替えます。

importをrequireにします。

// import './bootstrap';
require('./bootstrap');

resources/views/js/bootstrap.jsを書き替えます。

// import _ from 'lodash';
window._ = require('lodash');

// import axios from 'axios';
window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

⑥ .envの修正

Vite用の設定を削除し、Laravel Mix用の設定を追加します。

削除

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}"

追加

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

LaravelにLaravel Mixを入れる方法

次にLaravel Mixを入れていきましょう。

① Laravel Mixインストール

npm install laravel-mix --save-dev

② webpack.mixファイル作成

下記コードを入れます。

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', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

③ app.blade.phpにリンクを追加する

resources/views/layouts/app.balde.php と resources/views/layouts/guest.blade.phpの<head></head>内に、下記を追加します。

        <!-- Styles -->
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>

④ package.jsonの変更

package.jsonのscriptに、下記を追加します。

        "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"