Laravel, Vite.js создание многостраничного приложения с отдельными js файлами?

Question

[Tereverda]

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

1. app.js - использую, только для подключения общих библиотек, самого приложения в нем нет.

// Default Laravel bootstrapper, installs axios
import './bootstrap';

// Added: Actual Bootstrap JavaScript dependency
import 'bootstrap';

// Added: Popper.js dependency for popover support in Bootstrap
import '@popperjs/core';

2. Каждое Vue.js приложение создаю в отдельном js файле и в него импортирую Vue и компоненты

3. В Blade подключаю так

@vite('resources/js/app.js') // общий загрузчик, содержание выше
@vite('resources/js/box.js') // сама программа

4. чтобы отдельные js файлы добавились в манифест и собрались в продакшн добавлю каждый файл отдельно в секцию

vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'
import laravel from 'laravel-vite-plugin';


export default defineConfig({
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    // считать все теги с тире как пользовательские элементы
                    isCustomElement: (tag) => tag.includes('-')
                }
            }
        }),
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
                'resources/js/box.js', // тут отдельной строкой каждый файл
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js'
        }
    },
});

Я правильно делаю, или это какие-то костыли?

Comments

[smilingcheater]

Выглядит немного костыльно.
Если вы хотите, чтобы библиотеки были одним отдельным общим чанком - рекомендую использовать splitVendorChunkPlugin (https://v3.vitejs.dev/guide/build.html#chunking-st... ). А для того, чтобы не писать руками строки для подключения каждого файла в vite.config.js - можно точки входа расположить в отдельной папке, и подключать все файлы из неё через glob(), вот так:

import {glob} from 'glob';
export default defineConfig(({mode}) => ({
...
    plugins: [
        vue(...),
        laravel({
            input: [
                ...glob.sync('./resources/js/pages/*.js'),
            ],
        }),
    ],
    ...
}));

[Tereverda]

smilingcheater, дай Бог вам здоровья, мил чАловек)) изучу

[Tereverda]

smilingcheater, import {glob} from 'glob'; - нужно отдельным пакетом устанавливать?
в документации идет через const modules = import.meta.glob('./dir/*.js')
https://vite-docs-ru.vercel.app/guide/features.htm...