Laravel 9 にLaravel Mix でjQuery を追加する

こんばんは、ウチイダです。

Laravelの案件でも、フロントをjQueryにするパターンはちょいちょいありますね。

初期構築の際、いつもインストールに手間取るので、未来の自分のために書いておくことにします。

vueのやり方は検索に出てくるんですけど、jQuery はないのはなぜなのでしょうね…？

1. npm でjQuery をインストール

$ npm install jquery --save-dev 

2. webpack.mix.js を編集

autoload() でjQueryを指定するだけで、public/app.jsにも含まれるし、$で呼び出せるようにもなります。

bootstrap.js などrequire() を書く必要があるのかと思ってしまうのですが、それもいりません。

mix.js("resources/js/app.js", "public/js")
    .sass("resources/scss/custom.scss", "public/css")
    .postCss("resources/css/app.css", "public/css", [
    ])
    /* 以下を追記 */
    .autoload({
        jquery: ["$", "window.jQuery"],
    });
    /* 追記ここまで */

3. npm run でコンパイル

コンパイルします。

$ npm run dev

全く関係ないですが、コンパイルは機械語への変換のことだと理解していたので、JavaScript を「コンパイルする」という言葉遣いはいまだに違和感がぬぐえないんですよね…

4. View で読み込み

Blade テンプレートのヘッダ部分などに、以下を追記します。

<script src="{{ mix('js/app.js') }}"></script>

以上です。

あなたのお役に立てれば幸いです。