I'm new to WordPress development.

I have been following a tutorial in Udemy to build my new WordPress website. As recommended by the trainer, it is useful to use npm to package the JavaScripts using "@wordpress/scripts". The npm command monitors a single index.js file, which is then compiled into WordPress friendly version. Then in functions.php I added the wp_enqueue_script() function to call the index.js from build folder.

The problem: I have created multiple JavaScript files, which contain new classes with the required code and are imported into the main index.js file. Each parent JavaScript file is responsible for a specific functionality, e.g. I have MyLogin.js file which is responsible for handling user login and another file EditProfile.js which handles user profile editing functionality. The EditProfile.js should be called/instantiated only when the user is logged in and the MyLogin.js should be called/instantiated only when user is not logged in. According to the articles I have read online, I can use functions.php to enqueue specific JavaScript files when a user is on a specific page. This would work if I would not use the npm to package my JavaScripts into a single file, but how do I handle the load of required JavaScript files from a single bundled index.js file?

The only solution I thought of, was to create an evaluation statement in the index.js file to only call/instantiate the required class if the current page is home page or profile page respectively, but to me it seems as a bad coding practice.

Can you please guide me to the right direction?

P.S. Is it even worth to use "@wordpress/scripts" to compile everything into a single file?

Here is my index.js file

import "../css/general.css";
import "../css/style.css";
import "../css/queries.css";
import "../css/profile.css";
import "../css/login.css";
import "../css/front-page.css";

import EditProfile from "./modules/EditProfile";
import MyLogin from "./modules/MyLogin";

const myLogin = new MyLogin();
const editProfile = new EditProfile();

The logic I was thinking of would be something like this:

import "../css/general.css";
import "../css/style.css";
import "../css/queries.css";
import "../css/profile.css";
import "../css/login.css";
import "../css/front-page.css";

import EditProfile from "./modules/EditProfile";
import MyLogin from "./modules/MyLogin";

if (window.location.href == "https://<site_url>") {
  const myLogin = new MyLogin();
}

if (window.location.href == "https://<site_url>/profile") {
  const editProfile = new EditProfile();
}