はじめに
最新のLaravel9では、フロントエンド(JS,CSS)のビルドツールについて、従来のLaravel MixからViteへと置き換わりました。
基本的にはViteで開発を進めると良いと思いますが、従来のLaravel Mixへ戻す手順を解説します。
他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。
【紹介】個人開発
私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。
また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます。
以下の記事を参考にしました。
https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-vite-to-laravel-mix
Laravelプロジェクトの導入
今回はLaravel Sailを使って、Laravelプロジェクトを作成します。
構築手順については、以下の記事を参考にしてください。
Viteでビルド
まずはViteを確認しましょう。
標準ではViteが導入されていますので、以下のコマンドでビルドを行い、ファイルを出力することができます。
sail npm run build開発時には以下のコマンドで実行することができます。
sail npm run devViteについては以下の記事にもまとめました。
Laravel Mixに戻す
では、本題です。
ビルドツールをViteではなく、従来のLaravel Mixに戻してみます。
以下のコマンドでMixをインストールします。
SailでNPMコマンドを実行します。
sail npm install --save-dev laravel-mixpackage.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-pluginpackage.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を活用しましょう。
GitHub Copilot
GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。
さいごに
今回は、Laravel標準のViteをLaravel Mixに戻す手順を解説しました。
戻したい場合は、是非参考にしてみてください。
コメント