Laravel6.0 이상에서 jQuery를 사용하는 방법

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> 등을 쓰고 읽을 필요가 없습니다.

resource 디렉토리에 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>

버튼을 만들고 클릭하여 경고가 표시되면 확인.


가능한 한 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('並び替えました');
        }
    });
});

이것으로 움직였습니다.