Digamos que tengo un sitio web con una estructura de archivos como esta:

 index.html main.js modules/my-module.js

index.html contiene (junto con una gran cantidad de HTML):

 <button id='my-btn'>My Button</button> <script type='module' src='./main.js'></script>

main.js contiene:

 import { myBtn } from "./modules/my-module.js";

y módulos/mi-módulo.js contiene:

 const myBtn = document.querySelector("#my-btn"); myBtn.addEventListener("click", function(){ alert("Hallo from My Button"); }); export { myBtn };

Ahora, si hago clic en el botón, recibo una alerta como se esperaba.

El problema que tengo es que tengo cierta información (es decir, variables con valores como cadenas, matrices, etc.) en otras etiquetas de script en la página index.html que necesito en módulos/mi-módulo.js

No quiero usar una variable global para esto.

Pensé en crear un elemento (s) en la página index.html con atributos de conjunto de datos como claves y asignarles valores. Luego, se podría acceder al elemento desde módulos/mi-módulo.js y sus atributos de conjunto de datos serían legibles. Esto funciona cuando lo pruebo, pero parece una forma larga de obtener acceso a la información disponible en la página index.html.

¿Hay algún otro enfoque que sea más directo?

Preferiría una respuesta a la pregunta en lugar de que me digan que soy un idiota o marcar la página como duplicada y señalar una página que no es un duplicado. El hecho de que mencione la palabra global no significa que se trate de una pregunta sobre cómo crear un global para el amable editor que me dirigió a una página sobre cómo hacer un global.