【Laravel】{{ mix() }}とは？JavaScriptファイルを読み込む最適な方法（Laravel Mixの活用）

LaravelでJavaScriptファイルを読み込む場合に、Laravel Mixを使うと軽量化したファイルを読み込むことができる。

Laravel MixとはLaravelの中でWebpackを使ってsass, scc, javascriptファイルなどをコンパイルできるAPIのこと。

ブレードの中で以下の記述があった場合はLaravel Mixでコンパイルしたjavascriptファイルを読み込んでいる。

<script src="{{ mix('ファイルパス') }}"></script>

##目次

1. Laravel Mixのインポート
2. コンパイルの設定（Webpack.mix.js）
3. コンパイル対象ファイルの編集
   1. コンパイル対象のjsファイルでimportする
   2. コンパイル対象のファイルを直接読みこむ
   3. globを使ってコンパイル対象をワイルドカードで指定する
4. コンパイルの実行
5. ブレードで呼び出し
6. （補足）assetヘルパを使った通常の読み込み

###Laravel MixでJSファイルコンパイルしてビューで使う方法

##1. Laravel Mixのインポート
Laravelのプロジェクトを起動したときに、package.jsonに記載されているので、インポートする。

#nodeとnpmの存在確認
##インストールされてない場合はインストール
node -v
npm -v

npm install

pacakge.jsonに記述してあるライブラリをインストール。

##2. コンパイルの設定（Webpack.mix.js） Webpackのコンパイル設定が書かれた`Webpack.mix.js`を編集する。

Javascriptのコンパイル設定は以下のように記述する。

・mix.js('コンパイル対象のjsファイルパス', 'コンパイル後のファイル出力先');

Webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js');

resources > js > app.jsファイルをコンパイルして、public > jsディレクトリ配下にapp.jsとして出力する。

##3. コンパイル対象ファイルの編集 対象のJavascriptファイルを読みこむ方法はいくつかある。

###3-1. コンパイル対象のjsファイルでimportする
ブレードで読み込む対象ためのファイルとしてscriptpt.jsをresources > jsディレクトリ配下に作成する。

コンパイル対象はapp.jsのため、このファイルの中でインポートする。

app.js

import "script.js"

###3-2. コンパイル対象のファイルを直接読みこむ コンパイル対象のファイルを直接読み込むようにすることもできる。

Webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/script.js', 'public/js');

###3-3. globを使ってコンパイル対象をワイルドカードで指定する

Webpack.mix.js

const mix = require('laravel-mix');
const glob = require('glob');

glob.sync('resources/js/*.js').map(function(file) {
  mix.js(file, 'public/js').version()
});

詳細はglobの使い方を参照。

##4. コンパイルの実行

npm run dev

もしくは以下を実行しておくと、変更を検知して自動コンパイルしてくれる。

npm run watch

##5. ブレードで呼び出し `