Фреймворк Laravel позволяет быстро подключать требуемые файлы с JS-скриптами. При этом он может сразу собирать несколько файлов JavaScript в один общий файл или, если этого требует логика проекта, в несколько файлов. Для того, чтобы воспользоваться этим средством разработки, нужно сначала собрать библиотеку из требуемых для подключения файлов, содержащих JavaScript, а после, воспользоваться API для определения инструкций сборки Webpack для того, чтобы собрать их в папке с файлами проекта, доступной из Web. Как подключать CSS файлы к проекту на Laravel с помощью Webpack читай по → этой ссылке.
Node.js и NPM
Предполагается, что у вас есть доступ к командной строки на сервере и то, что на сервере установлены Node.js и NPM. Для того, чтобы проверить, установлен ли Node.js можно воспользоваться командой:
node -v, которая выведет версию установленной Node.js. И командой:
npm -v, которая выведет версию пакета NPM, установленного на сервере.
Если при этих запросах выдаётся ошибка о том, что данная команда не найдена, это значит, что скорее всего эти пакеты не установлены на сервере и их нужно установить.
Подготовка скриптов JavaScript к переносу в проект
Для того, чтобы не создавать хаос у себя на сервере, все файлы, относящиеся к проекту лучше хранить в папке /resources, которая уже создана при установке Laravel. В эту папку вложена папка js, в которую и нужно складывать все файлы с JavaScript, которые нужны для работы с проектом. Если эти файлы нужно разделить на группы, можно сделать вложенные папки. Полный путь до папки к JS-скриптам относительно корня папок проекта будет:
/resources/jsНапример, создадим файл metrika.js для подключения Яндекс.Метрики на сайте.
webpack.mix.js — файл для указания того, что будет входить в сборку JavaScript проекта на Laravel
После того, как файл с JS-скриптом подготовлен, его требуется перенести в папку public проекта, которая служит корневой папкой для сайта.
Для этого нужно отредактировать файл webpack.mix.js, который находится в корневой директории проекта.
Для подключения одного файла к проекту нужно в этом файле webpack.mix.js прописать команду:
mix.js('resources/js/metrika.js', 'public/js/moonbase.js')где:
resources/js/metrika.js— это файл, который требуется подключить к проекту (с полным путём к нему)public/js/moonbase.js— это файл, куда требуется перенести данный файл (с указанием пути, куда переносим и названием файла, куда будут складываться все JavaScrirt скрипты)
Сборка файла с JS-скриптами для публикации на сайте Laravel
Для того, чтобы перенести файл с нашим JavaScript в папку проекта, нужно выполнить в консоли сервера из корня проекта команду:
$ npm run devДля сборки в режиме «продакшен» (без лишних символов в одну строку), используйте команду:
$ npm run productionВ результате получите отчёт:
DONE Compiled successfully in 1011ms 10:26:47 PM
Asset Size Chunks Chunk Names
/js/moonbase.js 1.27 KiB 0 [emitted] /js/moonbaseДля компиляции нескольких файлов JavaScript в проект Laravel
Для компиляции нескольких файлов JavaScript в проект Laravel в файле webpack.mix.js в качестве первого аргумента можно передавать массив с именами файлов, которые требуется подключить в проект, например:
mix.scripts([
'resources/js/file1.js',
'resources/js/file2.js',
'resources/js/file3.js'
], 'public/js/all.js');Подключение JS-скриптов к проекту Laravel
Всё, что осталось сделать, это в шаблон сайта вписать подключение собранного файла с JavaSript (или нескольких файлов в зависимости от функционала страниц проекта и необходимость поместить некоторые скрипты в начало страницы).
Но обычно (за редкими исключениями) достаточно добавить подключение JS-скриптов перед закрывающим тегом </body>, например так:
<script src="/js/moonbase.js"></script>После этого все подключенные скрипты должны начать работать после перезагрузки страницы проекта.
