Подключение JavaScript файлов к проекту на Laravel с помощью Webpack

Фреймворк 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>

После этого все подключенные скрипты должны начать работать после перезагрузки страницы проекта.

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)

Старт! Горячий старт на просторы интернета
Старт! Горячий старт на просторы интернета
Старт! Меню