Vite Laravel

Это современный инструмент для минификации и препроцессора файлов стилей и скриптов. При создании приложений с помощью Laravel, Vite обычно будет использоваться для объединения файлов CSS и JavaScript вашего приложения в готовые ресурсы.

Установка

Перед установкой нужно убедиться, что установлен Node и менеджер пакетов npm. Проверить можно с помощью двух команд:

node -v

npm -v

В установке Laravel вы найдете package.json файл в корне структуры каталогов приложения. Файл по умолчанию package.json уже включает в себя все, что нужно для начала работы с Vite.

Установка внешних зависимостей приложения через NPM:

npm install

Настройка

Vite настраивается через vite.config.js файл в корне проекта. Можно настроить этот файл в соответствии с потребностями, а также можете установить любые другие подключаемые модули, необходимые для вашего приложения, такие как @vitejs/plugin-vue или @vitejs/plugin-react.

Плагин Laravel Vite требует, указания точек входа для файлов приложения. Это могут быть файлы JavaScript или CSS, а также предварительно обработанные языки, такие как TypeScript, JSX, TSX, Sass.

Для того, чтобы не создавать хаос у себя на сервере, все файлы, относящиеся к проекту лучше хранить в папке /resources, которая уже создана при установке Laravel. В эту папку вложена папка css, в которую и нужно складывать все файлы со стилями CSS и папка js в которую и нужно складывать все файлы со скриптами JS. Если файлы нужно разделить на группы, можно сделать вложенные папки.

Полный путь до папки со стилями CSS относительно корня папок проекта будет:

/resources/css

Полный путь до папки со скриптами JS относительно корня папок проекта будет:

/resources/js

В файле vite.config.js должны быть перечисленны все файлы которые будут подключаться в проекте:

vite.config.jsimport { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
    
export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Laravel Vite и SPA

Вместо перехода по ссылкам и загрузки новой страницы, при каждом клике по ссылке происходит подгрузка некоторых данных через тот же axios во vue. И тот же vue отвечает за отображение этих данных. SPA это разделение на бэкенд и фронтенд — серверную и клиентскую часть.

SPA — single page application, переводится как одностраничное приложение. Загрузка страницы происходит один раз, а дальше — запрос-ответ. Благодаря этой схеме при первоначальной загрузке грузятся все стили и скрипты которые уже содержат шаблоны в себе, дальнейший обмен с сервером получается достаточно экономичным с точки зрения трафика, что положительно влияет на загрузку сервера и скорость получения данных.

Если вы создаете SPA, включая приложения, созданные с использованием Inertia, Vite лучше всего работает без точек входа CSS:

vite.config.jsimport { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
    
export default defineConfig({
    plugins: [
        laravel([
            'resources/js/app.js',
        ]),
    ],
});

Вместо этого вы должны импортировать свой CSS через JavaScript. Как правило, это делается в resources/js/app.js файле вашего приложения:

resources/js/app.jsimport './bootstrap';
import '../css/app.css';

Загрузка скриптов и стилей

С настроенными точками входа, осталось только указать их в @vite() директиве файлов Blade, которую вы добавляете в шаблон вашего приложения:

resources/views/posts/index.blade.php<!doctype html>
<head>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Объединение

Для использования библиотеки в своём коде, достаточно импортировать её с применением команды import согласно стандарту ES6, в данном примере знак _ указывает на объект скрипта:

import _ from 'underscore';

Воспользуемся какими-нибудь функциями подключенной библиотеки:

import _ from "underscore";
let arr = [1, 2, 3, 4, 5]
let res = _.first(arr) + _.last(arr);
console.log(res);

Можно импортировать не все функции, а только необходимые:

import {first, last} from "underscore";
let arr = [1, 2, 3, 4, 5]
let res = first(arr) + last(arr);
console.log(res);

Если нужно запустить глобальный код модуля, например для объединения файлов без обращений к метода:

import "owl.carousel";
import "magnific-popup";
import "jquery-match-height";
import "/resources/js/lazyload/jquery.lazyloadxt.extra.js";
import "jquery.cookie";
import "/resources/js/obratnyjotschet/obratnyj-otschet.js";
import "/resources/js/default/scripts.js";

Если нужно сделать глобальную переменную уровня всей страницы, можно явно присвоить её объекту window, тогда получить значение переменной можно обратившись к window.user. Но это должно быть исключением, требующим веской причины:

import _ from "jquery";
window.jQuery = _;
window.$ = _;

Запуск

Есть два способа запустить Vite.

Вы можете запустить сервер разработки с помощью dev команды, которая используется исключительно при локальной разработке. Сервер разработки автоматически обнаружит изменения в файлах и отразит их в открытых окнах браузера, файлы отдаются по отдельности и они не скомпилированы:

npm run dev

Для запуска в режиме продакшен, нужно запускать build команду, которая создаст постоянные версии в папке public/build/assets скомпилированных файлов:

npm run build

Подробная инструкция по Vite.