Laravel Mixを使ってjavascriptをコンパイルする

Laravelでjavascriptを使う場合、public / jsフォルダ内に置いて、Bladeファイルで読み込めば動きますが、今回は、Laravel Mixを使って複数のjavascriptファイルをまとめてコンパイルしたものを読み込んでみたいと思います。

前提

以下がインストールされている。

・Laravel Mix
・node.js
・npm

jsファイルの書き方

jsファイル単体でもコンパイルできますが、せっかくなので、２つのjsファイルを１つにまとめてコンパイルしてみます。

例えば、以下のような２つのjsがあったとします。

main.js

const param = 5;
const result = hoge(param);

console.log(result);

sub.js

function hoge(param) {

	param = param * 2;

	return param;
}

読み込み先の書き方

main.jsからsub.jsの関数を使いたいので、exportを使って、sub.jsの関数を他のファイルで使えるようにします。

関数の頭にexportを付けるだけです。

sub.js

export function hoge(param) {

	param = param * 2;

	return param;
}

読み込み元の書き方

importをつかって、main.jsからsub.jsを読み込みます。

import {関数名} from "読み込むファイルのパス";// 拡張子は省略する

main.js

import {hoge} from "./sub";

// 複数読み込む場合
import {hoge1, hoge2} from "./sub";

const param = 5;
const result = hoge(param);

console.log(result);

すべてを読み込む場合

import * as sub from './sub';

*で、すべて読み込み、
as で、名前を付けることができます。

読み込んだ関数を使うには、asで付けた名前を頭に付けて呼び出します。

const result = sub.hoge(param);

注意点

グローバル変数を設定する場合

変数の頭にwindow. を付ける。

window.param = 5;

Blade内で関数を呼び出す場合

タグ内で、以下のようにonclickで関数を呼び出すような時、関数をグローバル変数に入れておく必要があります。

index.blade.php

<div onclick="hoge();">ボタン</div>

main.js

window.hoge = function hoge() {

	// 処理

}

jsファイルの置き場所

コンパイル前のjsファイルは、resources > js 内に置いておきます。
この後のコンパイルで、public > js内に書き出されます。（ここに同名のファイルがあると上書きされるので注意）

webpack.mix.jsファイルの編集

以下の場所に、コンパイル元とコンパイル先を設定します。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
　　// ここに足す
   .sass('resources/sass/app.scss', 'public/css');

例えば、

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/main.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

main.jsとsub.jsがありましたが、sub.jsはmain.js内に読み込まれているので、書き出す必要はありません。
これで、２つのファイルを１つにまとめることができました。

コンパイル

コンパイル

$ npm run dev

主に開発中の動作確認などに使う。

本番用にコンパイル

$ npm run production

こちらのコマンドを使うと、必要最小限の構成で書き出されます。
ファイルサイズも軽くなり、読み込みスピードが上がります。が、コンパイルに時間がかかります。

開発中に自動的にコンパイルするコマンド

$ npm run watch

このコマンドを打つと、Ctrl + c で止めるまで、jsファイルの変更を監視して自動的にコンパイルし続けてくれます。
このコマンドを使わないと、変更するたびにコンパイルして確認しないといけないので大変ですね。ある意味必須のコマンド。

jsファイルの確認と読み込み

コンパイルされたjsファイルが、public > jsフォルダ内にあれば成功です。
あとは、通常通りBladeファイルから読み込むだけです。

まとめ

コンパイルすると、ファイルが軽くなるし、複数のjsをまとめることで、ページの読み込み速度も向上します。
また、複数のjsファイルの読み込む順番などを考える必要もなくなるというメリットもあります。

あと、コンパイルされたjsファイルは、人間には読みにくいコードになりますので、下手なスクリプトがバレにくくなるというメリット（個人的）もあったり。