Если возникла необходимость использовать отдельный скрипт написанный на 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’);
Спасибо, помог!