Слава Україні!

Laravel 9. Vite - тонкая настройка

Laravel 9. Vite - тонкая настройка, разделение скриптов по модулям и папкам

28-го січня 2023, 6:58

Не раз сталкивался с таким случаем - при сборке проекта с помощью Vite все файлы стилей и скриптов для разных модулей (напр. backend, frontend) компилируются в единый файл. Хотелось видеть отдельную сборку для backend`a и frontend`a.

Для этого изменил структуру подпапок в папке resources. Вынес файлы стилей и скриптов в соответствующие подпапки.

Теперь "причесываем" сам vite.config.js


    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    
    export default defineConfig({
        plugins: [
            laravel({
                // меняем папку сборки на assets
                buildDirectory: "public/assets",
                // входящие файлы для компиляции
                // указываем отдельно для backend`a и frontend`a
                input: [
                    'resources/sass/frontend/app.scss',
                    'resources/sass/backend/app.scss',
                    'resources/js/frontend/app.js',
                    'resources/js/backend/app.js',
                ],
                refresh: true,
            }),
        ],
        // опции для компиляции
        build: {
            // куда компилируем
            outDir: "public/assets",
            // генерировать manifest.json
            manifest: true,
            rollupOptions: {
                // опции для формирования пути и названий скриптов
                // разбивать по фрагментам
                // скрипты импортированных библиотек (точек входа)
                // компилировать в отдельные файлы
                output: {
                    chunkFileNames: 'js/[name]-[hash].js',
                    entryFileNames: 'js/[name]-[hash].js',
    
                    assetFileNames: ({ name }) => {
                        if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')) {
                            return 'img/[name]-[hash][extname]';
                        }
    
                        if (/\.css$/.test(name ?? '')) {
                            return 'css/[name]-[hash][extname]';
                        }
    
                        if (/\.(woff2?)$/.test(name ?? '')) {
                            return 'font/[name]-[hash][extname]';
                        }
                        
                        return '[name]-[hash][extname]';
                    },
                },
            }
        }
    });

В результате, после сборки, получаем такую структуру папок и файлов:

Далее в главном шаблоне frontend`a (по умолчанию app.blade.php) прописываем:


<head>
    ...
    
    @vite('resources/sass/frontend/app.scss', 'assets')
    ...
</head>
<body>
    ...
    ...
    @vite('resources/js/frontend/app.js', 'assets')
</body>

Соответствующие записи (изменив пути) делаем в шаблоне backend`a.

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


"resources/js/frontend/app.js": {
    "file": "js/app-6edac705.js",
    "imports": [
      "_jquery-0e5c5a1e.js"
    ],
    "isEntry": true,
    "src": "resources/js/frontend/app.js"
},
"resources/sass/backend/app.scss": {
    "file": "css/app-c41831d1.css",
    "isEntry": true,
    "src": "resources/sass/backend/app.scss"
},
"resources/sass/frontend/app.scss": {
    "file": "css/app-324c0c2d.css",
    "isEntry": true,
    "src": "resources/sass/frontend/app.scss"
}

Laravel 9. Аутентификация из разных таблиц

Laravel 9. Работа с датой и временем

Важлива інформація