laravelはnpmによるjavascriptのモジュールのパッケージングを利用できるが
ソース修正の度にnpm run dev(prod)
でコンパイルしなければならないし
画面毎のjsファイルなどを配置したい場合などファイルが複数になる場合、
パッケージングを分けることはできるが、管理がめんどいので外部jsを呼べるようにする。
layouts/app.blade.php
に@yield('inc-javascript')
を追加
あと、jsの読み込みはすべてdeferをつける。
layouts/app.blade.php
<html>
...
<head>
...
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
@yield('inc-javascript')
...
</head>
各ページのbladeファイルで@section('inc-javascript')
でjsファイルを指定する
index.blade.php
@extends('layouts.app')
@section('inc-javascript')
<script src="{{ asset('/js/hogehoge.js') }}" defer></script>
...
@endsection
app.js内のモジュールをを使う
resources/js/bootstrap.js
でrequireする。
必要ならグローバル変数に格納する。
bootstrap.js
require('moment');
globals.moment = require('moment');
window.moment = require('moment');
var moment = require('moment');
npm run dev(prod)
でpublic/js/app.js
にパッケージされる。