Best way to bundle several javascript files with Vite

I have several javascript files with functions in it, separated by concerns, like:

'/app/resources/js/backend/blog/functions.js'
'/app/resources/js/backend/event/functions.js'
...etc

The only way that I found to import those files into my Laravel's project is like this:

[/app/resources/js/app.js]

import * as blog_functions from './backend/blog/functions.js';
window.blog_functions = blog_functions;

import * as event_functions from './backend/event/functions.js';
window.event_functions = event_functions;

And on each of those files, something like this:

[/app/resources/js/backend/blog/functions.js]

export function my_custom_function (params){}

So my question here is, is there a better way to do this? What if I have a ton more of files? With my approach I'm pretty sure that the import's lines code will be countless.

Thanks.

martinbean

2 years ago

Level 80

@kbzone Just create JavaScript modules? And then import them into the “main” files that need them:

// resources/js/src/event.js
export function eventFunctionOne() {};
export function eventFunctionTwo() {};

// resources/js/app.js
import { eventFunctionOne } from './src/events.js';

// Call a function from a module
eventFunctionOne();

Please or to participate in this conversation.