Laravel6.0以降でjQueryを使用する方法

7858 ワード
PHP Laravel jQuery webpack PHP テキストリンク

LaravelでjQueryを使用する時にどこから読み込むのが良いか調べました。

laravel/uiをインストール

$ composer require laravel/ui

laravel/uiパッケージを追加するとbootstrap.jsでjqueryが読みこまれるようになる。

bootstrap.js
/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

window.$ = window.jQuery = require('jquery');で読み込まれる。
bladeテンプレートに<script src="https://code.jquery.com/jquery-3.3.1.js"></script>など書き込んで読み込ませる必要はありません。

resorceディレクトリにjsファイルを作成

resources/js/jquery.js
$(function () {
    $('#test_jquery').on('click', function() {
        alert("Hello, jQuery!");
    })
})

LarvelMixでコンパイルして読み込む

webpack.mix.jsに先ほど作成したresources/js/jquery.jsをコンパイルするように書き込む。

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

あとはyarn devもしくはnpm run devで自動でコンパイルしてくれる。

index.blade.php
<button id="test_jquery">ぽちっとな</button>

ボタンを作成して、クリックしてアラートが表示されたらOK。

なるべくpublicディレクトリに置いて、直接読み込むようなことはしない。

（おまけ）jquery-uiも追加してみる

jquery-uiをインストール

$ yarn add jquery-ui --dev

bootstrap.jsでjquery-uiを読み込む
今回は並び替えのsortable.jsを読み込んでみます。

bootstrap.js
try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    require('jquery-ui/ui/widgets/sortable.js');
    require('bootstrap');
} catch (e) {}

jquery.jsに並び替えのコードを追加

jquery.js
$(function() {
    $("#box").sortable({
        axis: "y",
        opacity: 0.5,
        update: function() {
            console.log('並び替えました');
        }
    });
});

これで動きました。