Laravel Mixとは、WebPackを便利に使うためのツール。
「一体、何の役にたつの？」
「どうやってインストールするの？」
「できるだけ分かりやすく知りたい」
という方のために、解説していきます。
分かりやすく解説、よろしく
了解！
Laravel Mixとは
Laravel公式マニュアルによると、Laravel Mixは次のようなものです。
Laravel Mixは多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をwebpackでスラスラと定義できるAPIを提供しています。
引用元：https://readouble.com/laravel/8.x/ja/mix.html
うーん？？
ちょっと待って！
分かりやすく言うから。
もっと分かりやすく言うと、Laravel Mixは、webpackのAPIラッパー。
ラッパーは、包み込んで、使いやすくしてくれる存在、かな。
ラッピングしてくれる感じだね。
うん。
ラッパーとは、本来の機能を包み込み、使いやすくしてくれる存在のこと。
ユーザーからすると、webpackの存在は見えません。Laravel Mixがその機能を持っているように見えるのです。
なんだか影武者っぽい！
だね。
webpackには、JavaScriptやCSSといったファイルをまとめたり、コンパイルする役割があります。
コンパイルは、コンピュータ上で実行可能なように変換すること。
Webアプリの場合は、ブラウザで表示できるようにするってことです。
Laravel Mixは、このwebpackを使いやすくしてくれるのです。
Laravel Mixの役割は分かったけど、これって、絶対必要？
なくても良い気もするけど。
絶対ってわけじゃないけど、ほぼ、必要かな。
Laravel Mixは必須なのか？
結論から言うと、絶対に必要というわけではありませんが、ほぼ必要、です。
公式マニュアルでも、このように書かれています。
しかし、アプリケーションの開発時に必要だというわけではありません。どんなアセットパイプラインツールを使用してもかまいませんし、使わなくても良いのです。
引用元：https://readouble.com/laravel/8.x/ja/mix.html
ただ実際問題、Laravelにbootstrapやvue, Reactなどをインストールすると、もれなく必要になってきます。
こういったフレームワークやライブラリのファイルは、webpackによってコンパイルをする必要があるからです。
たとえば、bootstrapではscssファイルが使われていますが、このままでは、ブラウザに表示できません。
そこでコンパイルしてcss形式に変換します。
色々な新しい方法が誕生しているけど、ブラウザで表示できる形式は限られているんだ。
だから、新しい形式のファイルは、コンパイルしてあげなきゃいけない。
そうしないと、ブラウザで表示されないってことだね。
Laravel Mix、大事だね。
Laravel Mixのインストール
最後にLaravel Mixのインストール手順を解説します。
Laravel公式マニュアルによると、次の3ステップ。
① node.js をインストール
まずはnode.jsのインストールが必要です。
こちらのサイトより、環境にあったものをダウンロード・インストールしてください。
② 必要なフレームワーク・ライブラリをインストール。
たとえば vue を追加する場合は、 php artisan ui vue を実行します。
プロジェクト内のpackage.jsonファイルが書き変わります。
③ Laravel Mixのインストール。下記を実行します。
|
1 |
npm install |
プロジェクト内のpackage.jsonファイルに記載されたライブラリが読み込まれます。
④ コンパイルを実行。下記を行います。
|
1 |
npm run dev |
②～④は、新しいフレームワークやライブラリをいれた後に、都度、実行します。
node.jsのインストールは面倒だけど、最初だけでOKだよ。
なるほど。
さいごに
今回はLaravel Mixについて解説しました。
今回のまとめ
- Laravel Mixとは、webpackを使いやすくしてくれるもの
- これによってJavaScriptやCSSをコンパイルし、ブラウザに表示できる
- BootstrapやVue, React などをLaravelで使うときに必要
何となくわかってきた！ と思っていただけると嬉しいです。
なお、vueのインストールは、別記事にまとめています。
