Laravel как подключить js файл

Узнайте, как правильно подключить JavaScript-файл в проекте на Laravel с примером и пошаговой инструкцией.

Для того, чтобы подключить JS-файл в шаблоне Laravel, необходимо воспользоваться методом mix() из пакета Laravel Mix. Данный метод представляет из себя обертку для Webpack, так что для подключения JS-файлов нам потребуется наличие Webpack в проекте. Создадим простую структуру файлов:

my-project
├── resources
│   └── js
│       └── app.js
└── webpack.mix.js

Содержимое файла webpack.mix.js будет простым:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js');

При этом метод mix.js() принимает два параметра: путь к файлу, который мы хотим подключить и путь, куда он должен быть скомпилирован. В нашем случае это папка public/js, куда будет скомпилирован файл app.js из папки resources/js. Для запуска сборки нам понадобится запустить команду npm run dev или npm run production в зависимости от того, для какой среды мы собираем проект.

После сборки мы будем иметь скомпилированный файл в папке public/js. Для подключения этого файла в шаблоне нам понадобится использовать метод mix(), так как он автоматически вычисляет путь к файлу и заменяет его на соответствующий путь в среде разработки. В шаблоне будет выглядеть следующим образом:

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

Теперь файл app.js будет подключен в шаблоне. Для более подробного ознакомления с методом mix() рекомендуем ознакомиться с документацией Laravel Mix.