Soy nuevo en el desarrollo de WordPress.
He estado siguiendo un tutorial en Udemy para construir mi nuevo sitio web de WordPress. Según lo recomendado por el entrenador, es útil usar npm para empaquetar los JavaScripts usando "@wordpress/scripts". El comando npm monitorea un solo archivo index.js, que luego se compila en una versión compatible con WordPress. Luego, en functions.php, agregué la función wp_enqueue_script() para llamar a index.js desde la carpeta de compilación.
El problema: he creado varios archivos JavaScript, que contienen nuevas clases con el código requerido y se importan al archivo index.js principal. Cada archivo principal de JavaScript es responsable de una funcionalidad específica, por ejemplo, tengo el archivo MyLogin.js que es responsable de manejar el inicio de sesión del usuario y otro archivo EditProfile.js que maneja la funcionalidad de edición del perfil del usuario. El EditProfile.js debe llamarse/instanciarse solo cuando el usuario haya iniciado sesión y MyLogin.js debe llamarse/instanciarse solo cuando el usuario no haya iniciado sesión. De acuerdo con los artículos que he leído en línea, puedo usar functions.php para poner en cola archivos JavaScript específicos cuando un usuario está en una página específica. Esto funcionaría si no usara el npm para empaquetar mis JavaScripts en un solo archivo, pero ¿cómo manejo la carga de archivos JavaScript requeridos desde un solo archivo index.js incluido?
La única solución que pensé fue crear una declaración de evaluación en el archivo index.js para llamar/crear una instancia de la clase requerida solo si la página actual es la página de inicio o la página de perfil respectivamente, pero me parece una mala práctica de codificación.
¿Puede por favor guiarme en la dirección correcta?
PD ¿Vale la pena usar "@wordpress/scripts" para compilar todo en un solo archivo?
Aquí está mi archivo index.js
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();La lógica en la que estaba pensando sería algo como esto:
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(); }