概要
LaravelでJavascript使ってみようとした時に詰まったので備忘録として記載します。
もしJSファイルにコードを記載しても反応しない場合に試していただければと思います。
前提
・Laravel-mix使用（LaravelではLaravel-mixを使って動作させるのが基本と教わった）
・jsファイルが二箇所あるので注意
app/public/js
app/resources/js
→読み込むのはapp/public/jsの方になる
→ソースはresourcesに配置し、laravel-mixを通してpublicに出力させるように管理するとよい
・注意
viewファイルに直接scriptタグでは書かない
app/public/jsのファイルに直接コードを書き込まない
大まかな手順
①resources/js/配下にjsファイルを作る（ファイル名は何でもいいが、例ではmemo.jsにする）
②webpack.mix.jsに「resources/js/memo.js」を「public/js」へコピーする記述を追記する
③ターミナルで$ npm run devとコマンドをたたく
④viewのヘッダーにjsを読み込む記述をする
①jsファイル作成
resources/js/配下にjsファイルを作る
（今回は例としてボタンをクリックしたらアラートが出るような記述をします）
function btnChk(){
alert("処理中です");
};
window.buttonClick = buttonClick;
②webpack.mix.jsを編集
mixの部分に下記の記述を足す
.copy('resources/js/memo.js', 'public/js')
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.copy('resources/js/memo.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
③npm実行
実行することで「resources/js/memo.js」が「public/js」配下にコピーされる
$ npm run dev
④viewのヘッダーにjsを読み込む記述をする
ヘッダー部分に下記の記述を追記する。
<script src="{{ mix('js/memo.js') }}" defer></script>
<!doctype html>
<html lang="ja">
<head>
=== 中略 ＝＝＝
<!-- Scripts -->
<script src="{{ mix('js/memo.js') }}" defer></script>
</head>
<body>
<input type="button" value="button" onclick="btnChk()">
</body>
確認
実際にボタンをクリックしてみて機能していればOK
以上となります。
自分はネットの先輩方に教えていただきながらこれで解決しました。