Laravel8でjQueryを実装しよう!【Laravel mixを使う】

Laravel8でLaravel mixを使ってjQueryを使ったjavaScriptを実装する方法をまとめました。

1. jQueryをインストールしよう

Laravelのプロジェクトがあるディレクトリまで移動。

npm install jquery –save

上記↑コマンドを実行する。

2. webpack.mix.jsでjQueryを読み込もう

Laravelのプロジェクト直下にwebpack.min.js ファイルがあるので、そのファイルを編集。

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

webpack,mix.jsを編集することで/resources ディレクトリ配下にあるjsファイルなどのビルドを行ってくれます。

ビルド完了後、/public ディレクトリ配下にファイルが生成されるのでそのファイルを読み込んでViewファイルの実装を進めていきます。

ということで、先程コマンドでインストールしたjQueryを読み込むコードを書きます。

.autoload({ “jquery”: [‘$’, ‘window.jQuery’], });

これを書くと以下の通り。↓↓

webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .sourceMaps()
  .autoload({
    "jquery": ['$', 'window.jQuery'],
  });

これで、Viewファイル(xxxx.blade.php)に以下のコードを追加して読み込み完了です。

<script src=”{{ mix(‘js/xxxx.js’) }}”></script>

3.最後に

/resources/js ディレクトリ配下のjavaScriptのフィアルの修正をするとビルドが必要。

修正後、最後に以下コマンドを実行する方法。

npm run dev

随時ビルドをしてくれる以下のコマンドを実行する方法。

npm run watch-poll

どちらかでビルドしながら実装していくようになります。