Использование jQuery в шаблоне Laravel 5.6

Если возникла необходимость использовать отдельный скрипт написанный на jQuery только на одной странице сайта, то сделать это можно следующим образом.
Создаем отдельный скрипт /resources/assets/js/script.js

try {
    $(document).ready(function(){
        console.log('Success!');
    });
} catch (e) {}

Добавляем в шаблоне строчку:

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

В /webpack.mix.js добавляем команду, чтобы файлик скомпилировался в папку /public/js/ . Полный код файла:

mix.js('resources/assets/js/app.js', 'public/js')
    .js('resources/assets/js/script.js', 'public/js')// our script
    .sass('resources/assets/sass/app.scss', 'public/css');

Запускаем сборку для develop среды:

npm run dev

К сожалению в таком виде код отказался работать, в консоли можно увидеть ошибку
Uncaught ReferenceError: $ is not defined

На GitHub нашел обсуждение похожей проблемы
Добавил строчку:

window.$ = window.jQuery = require('jquery');

Полный код:

try {
    window.$ = window.jQuery = require('jquery');
	
    $(document).ready(function(){
        console.log('Success!');
    });
} catch (e) {}

Заработало.
Кроме этого варианта решения проблемы видел пример с использованием автозагрузки в файле /webpack.mix.js:

.js('resources/assets/js/script.js', 'public/js')
    .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery'],
    })

Возможно в какой-то ситуации подобный вариант окажется предпочтительнее.
Что вы думаете по этому поводу, пишите в комментариях.

Улучшаем код

Изменим подключение скрипта в шаблоне на:

@push('scripts')
        <script src="{{asset('js/script.js')}}"></script>
@endpush

Перед закрывающим тегом body у меня подключен app.js после него добавим вызов @stack

<script src="{{ asset('js/app.js') }}" defer></script>
@stack('scripts')

тем самым если в одном из шаблонов вы подключите скрипты между

@push('идентификатор')
ваш скрипт
@endpush

, он добавится в месте, где вы вызываете @stack(‘идентификатор’)

Подключение скрипт на всех страницах сайта

В этом случае достаточно добавить в файл /resources/assets/js/app.js подключение скрипта:

require('./script.js'); 

например после require(‘./bootstrap’);

Рекомендуем к прочтению



1 Комментарий

Оставить комментарий

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания применять.

Срок проверки reCAPTCHA истек. Перезагрузите страницу.