Laravel 9. Vite, Mix и Vue

Начиная с версии 9.19 в Lravel на смену laravel-mix пришел vite.

Вкратце, что сразу бросается в глаза

• скорость - vite действительно работает очень быстро
• авторендеринг - теперь не надо обновлять страницу после внесения изменений
• в dev-режиме работает через websocket:5173
• сборка происходит в папку public\build\assets

Самое время определиться с необходимыми CSS и JS фреймворками. В заметке про установку Laravel я добавлял пакет laravel/ui. Этот пакет содержит все необходимые классы и представления для регистрации, входа и восстановления пароля пользователей. Осталось только их опубликовать.

Если планируется использовать только Bootstrap (без Vue, React и т.п.):

        php artisan ui bootstrap --auth
    

Если планируется использовать Vue:

        php artisan ui vue --auth
    

эта команда сгенерирует каркасы классов и представлений (scaffolding), пропишет Bootstrap для последующей установки, настроит JS-скрипты для работы с Vue, а также создаст образец Vue-компонента - ExampleComponent

Vite

Если планируете работать с vite, для начала обновляемся до последней версии.

Из файла package.json удаляем строки:

"laravel-vite-plugin": "^0.5.0",
"vite": "^3.0.0"

и запускаем

npm install

Добавляем необходимые пакеты

npm install vite laravel-vite-plugin --save-dev

Далее ставим плагин для Vue ну и собственно сам Vue:

npm install @vitejs/plugin-vue
npm install vue@next vue-loader@next

Все необходимые пакеты установлены. Проверяем. В файл resources/views/layouts/app.blade.php после тега <div id="app"> вставляем <example-component></example-component>

Собираем:

npm run build

> build
> vite build

vite v3.0.4 building for production...
✓ 126 modules transformed.
public/build/manifest.json             0.25 KiB
public/build/assets/app.c090eeea.css   186.93 KiB / gzip: 26.55 KiB
public/build/assets/app.4dbf83ae.js    304.62 KiB / gzip: 108.37 KiB

Запускаем сервер:

php artisan serve

INFO  Server running on [http://127.0.0.1:8000].

Press Ctrl+C to stop the server

Если ошибок нет, то на странице http://localhost:8000/login увидим такой блок:

При разработке, для постоянного отслеживания изменений и авторендеринга страницы:

npm run dev

VITE v3.0.2  ready in 620 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose

LARAVEL v9.21.6  plugin v0.5.2

➜  APP_URL: http://localhost

Далее представлены полностью рабочие скрипты. Если что-то не работает - проверяем.

// Файл vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        // Следующая секция может быть пустой. Т.е. просто vue()
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

// Файл resources/js/app.js
import './bootstrap';
import { createApp } from 'vue';

const app = createApp({});

import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);
app.mount('#app');

В файле resources/views/layouts/app.blade.php в секции заголовка должна быть строка @vite(['resources/sass/app.scss', 'resources/js/app.js'])

Mix

Разработчики, привыкшие работать с laravel-mix, возможно захотят вернуться к привычному инструменту. В этом нет ничего невозможного :-)

Устанавливаем mix:

npm install --save-dev laravel-mix

Открываем webpack.mix.js и приводим его к следующему виду:

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .postCss('resources/css/app.css', 'public/css');

Открываем package.json и секцию scripts приводим к следующему виду:

"scripts": {
     "dev": "npm run development",
     "development": "mix",
     "watch": "mix watch",
     "watch-poll": "mix watch -- --watch-options-poll=1000",
     "hot": "mix watch --hot",
     "prod": "npm run production",
     "production": "mix --production"
}

В файле resources/views/layouts/app.blade.php в секции заголовка меняем
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
нв
<link rel="stylesheet" href="{{ asset('css/app.css') }}"> <script src="{{ asset('js/app.js') }}" defer></script>

Если был установлен vite - удаляем:

npm remove vite laravel-vite-plugin

Удаляем файл конфигурации vite - vite.config.js

jQuery

Было бы несправедливо оставить без внимания такой фреймворк ка jQuery

Установка:

npm install jquery

Далее необходимо его импортировать в проект. Для этого в файл resources/js/bootstrap.js внести следующие строки:

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

Icons

Ну и для полного счастья нам не хватает какого-нибудь "иконочного" шрифта. Можно конечно поставить такого монстра как Font Awesome с его более чем 16 000 иконками. Но я думаю что 1 500+ bootstrap-иконок вполне достаточно

Установка:

npm install bootstrap-icons

Для импорта, в файл resources/sass/app.scss вносим строку:

@import 'bootstrap-icons/font/bootstrap-icons';