はじめに
最新のLaravel9では、フロントエンド(JS,CSS)のビルドツールについて、従来のLaravel MixからViteへと置き換わりました。
基本的にはViteで開発を進めると良いと思いますが、従来のLaravel Mixへ戻す手順を解説します。
他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。
【紹介】個人開発
私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。
また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます。
以下の記事を参考にしました。
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を活用しましょう。
さいごに
今回は、Laravel標準のViteをLaravel Mixに戻す手順を解説しました。
戻したい場合は、是非参考にしてみてください。
コメント