2022年6月末から、新規でLaravelをインストールすると、Laravel Mixではなく、Viteが自動で入ります。
本記事では、ViteをアンインストールしてLaravel Mixにしたい、という場合の方法を解説していきますね。
なお実行した環境は下記のとおりです。Vue.jsは使っていませんが、使う場合には、また他の設定も必要です。環境が異なると、記事通りの設定ではうまくいかない可能性があります。
- Laravelバージョン9.19.0
- Breezeパッケージをインストールした直後の開発環境
- Breezeパッケージにデフォルトで入っているTailwind CSSを利用
- Node.jsインストール済み
LaravelからViteをアンインストールする方法
①Vite削除コマンドを実行
|
1 |
npm remove vite |
|
1 |
npm remove laravel-vite-plugin |
②Vite設定ファイル（vite.config.js) 削除
VS Codeご利用の場合、プロジェクトの下のほうにファイルがあります。
③ テンプレートファイルのリンクを無効にする
resources/views/layouts/app.balde.php と resources/views/layouts/guest.blade.phpに
自動で入っている下記のコードを無効にします。
④ package.jsonの変更
package.jsonのscriptsで、下記を削除します。
|
1 2 |
"dev": "vite", "build": "vite build" |
⑤ jsファイルの修正
resources/views/js/app.jsを書き替えます。
importをrequireにします。
|
1 2 |
// import './bootstrap'; require('./bootstrap'); |
resources/views/js/bootstrap.jsを書き替えます。
|
1 2 3 4 5 6 7 |
// 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用の設定を追加します。
削除
|
1 2 3 4 5 |
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}" |
追加
|
1 2 |
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}" MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" |
LaravelにLaravel Mixを入れる方法
次にLaravel Mixを入れていきましょう。
① Laravel Mixインストール
|
1 |
npm install laravel-mix --save-dev |
② webpack.mixファイル作成
下記コードを入れます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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>内に、下記を追加します。
|
1 2 3 4 5 |
<!-- Styles --> <link rel="stylesheet" href="{{ asset('css/app.css') }}"> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> |
④ package.jsonの変更
package.jsonのscriptに、下記を追加します。
|
1 2 3 4 5 6 7 |
"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" |
⑤ jsファイルの修正
Viteをアンインストールする項目に書いたので、省略します。
⑥ .envの修正
Viteをアンインストールする項目に書いたので、省略します。
準備は以上となります。npm run devを実行すると、Laravel Mixでコンパイルが行われます。
なおプロジェクト作成後、npm run devを行った時に
WARNINGS in child compilations とエラーが出たりしますが、これはまたViteと違う問題です。対策は下記にあります。
本記事を書いた理由
Laravelでは、2022年6月末より、新規プロジェクトを作成した際にLaravel Mixに代わってViteが入るようになりました。
わたしはLaravelの使い方を教えていますが、今回Viteになったことで、本番環境で エラーが出たり等の連絡が立て続けにありました。
そんな状況なので、「とりあえず、これまでどおりLaravel Mixを使いたい！」という人もいるかと思います。今回の記事はそんな方向けに書きました。
お役にたつことがあれば、嬉しいです。
さいごに
正直言うと、今のわたしのViteへの気持ちは、あまりポジティブではありません＾＾；
う、デフォルトでViteをいれるなんて、面倒なことを。
とちょっぴり思ってます。
ただもちろんViteに切り替わったことで速度等のメリットがありそうですし、最初は、なんでも不具合がつきもの。今後はどんどん良くなると思っています。
なおLaravel Mixに切り替える前に、もしかしたらエラーを修正できる可能性もあります！
下記にLaravel Viteに関するエラーと対策記事を取り揃えているので、参考にしてくださいね。
