Tengo y exportUserList.js, importUserList.js y los archivos main.js. El archivo main.js contiene 2 variables ya definidas que quiero registrar en la consola y también quiero registrar la variable de usuario importada desde el archivo main.js. Pero sigo recibiendo 'usuario no definido'. He usado la opción de ventana sugerida, pero no pasa la variable. ¿Se puede corregir esto?
este es el html:
<html lang="en"> <head> <meta charset="utf-8" /> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" /> <title></title> <style> </style> <head> </head> <body> <script type="module" src="/importUserList.js"></script> <script type="text/javascript" src="/main.js"></script> </body>esta es la exportación exportUserList.js:
export const user = 'first user'esta es la importación importUserList.js:
import {user} from './exportList.js' console.log(user) window.user = usery este es el main.js:
let names = 'mark' let numbers = 10 console.log(names) console.log(numbers) console.log(user)Opción 1: defer su secuencia de comandos principal, porque los módulos difieren de manera predeterminada, y porque su secuencia de comandos principal no se ejecuta antes que el módulo.
Sin embargo, esa es la mala opción, y no deberías ponerla en práctica porque eso te mantiene usando los módulos de una manera completamente incorrecta. Nunca hagas eso.
La solución mucho mejor es convertir su main.js en un módulo y luego decirle que importe lo que necesita para ejecutarse. No carga módulos solo para vincular sus datos en globalThis ( window en este caso), el objetivo de los módulos es mantener el código contenido, de modo que lo que sea que necesite las exportaciones de un módulo, pueda importarlo según sea necesario. Usas módulos para no contaminar el alcance global =)
Entonces: elimine ese importUserList.js y en su lugar coloque la importación en su secuencia de comandos principal:
import {user} from './exportList.js' let names = 'mark' let numbers = 10 console.log(names) console.log(numbers) console.log(user)Y luego cargue su script principal como un módulo con:
<script type="module" src="/main.js"></script>Y luego, por supuesto, recuerda que los módulos siempre se cargan en diferido .
Básicamente: si está usando módulos, use módulos "hasta el final".