Tengo un proyecto creado con Javascript, jQuery y Vite.js. Necesito compartir funciones y variables entre un archivo JS que es un módulo y otro archivo JS que no es un módulo. Me refiero específicamente a si la etiqueta del script tiene type="module" o no. es posible? Entiendo que si pudiera configurar ambos tipos de archivos de script en "módulo", esto resolvería mi problema y podría usar fácilmente la sintaxis de importación/exportación para compartir funciones y variables. Sin embargo, la segunda secuencia de comandos no se puede establecer en type="module" , ya que eso rompería fragmentos de código usando ciertas dependencias.
Solo para ilustrar lo que digo, aquí hay un archivo HTML vinculado a dos archivos JS diferentes:
prueba.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script type="module" src="./script1"></script> <script src="./script2"></script> </head> <body></body> </html> Ahora, script1.js tiene una variable a la que queremos acceder desde script2.js :
script1.JS
const testVariable = "hello test variable";script2.js
console.log(testVariable) //returns undefinedObviamente, no puedo usar import/export o require ya que el segundo script no es un módulo. ¿Hay alguna forma de evitar esto? Sé que normalmente los archivos de secuencias de comandos pueden acceder a las funciones de las etiquetas de secuencias de comandos colocadas sobre ellos, pero esto no parece ser cierto para dos tipos de secuencias de comandos diferentes.
Pensé que tal vez podría usar jQuery $.getScript según esta publicación de S/O , pero por lo que sé, eso ejecuta el script solicitado, pero no me permite acceder dinámicamente a variables y/o funciones específicas en el script solicitado. ?
Los módulos de script no crean implícitamente variables globales. Los nombres de funciones o clases con nombre o variables declarados en un módulo se mantienen en un cierre creado para el contenido del módulo, lo que los hace inaccesibles por medios directos desde fuera del módulo.
Uso de variables globales
Si el único problema es no poder acceder a las variables exportadas por un script de módulo, considere crear las variables como propiedades del objeto de window global en el archivo del módulo en lugar de usar declaraciones de variables.
Esto cambiaría las declaraciones del módulo como
let brandName = "fooware";a
window.brandName = "fooware"; Esto permitiría que el código en cualquier secuencia de comandos acceda a brandName como una variable.
Setters y Getters
Si un módulo de secuencia de comandos debe permanecer sin cambios, puede configurar un módulo intermedio para importar elementos exportados y volver a publicarlos como establecedores y captadores de un nombre de propiedad de objeto global, utilizando Object.defineProperty* EG
<script type="module"> import {brandName} from "./script1.js"; Object.defineProperty(window, "brandName", { get() { return brandName; }, set(newValue) { brandName = newValue; }, enumerable: true }); </script> Tenga en cuenta que este tipo de módulo (que no exporta ningún valor) se puede incluir en línea en HTML usando etiquetas <script> sin un atributo src .
* Object.defineProperties se puede usar para definir múltiples propiedades de acceso a la vez usando una sintaxis ligeramente diferente.
Aplazamiento del guión no modular
Las secuencias de comandos del módulo se posponen automáticamente sin necesidad de que el navegador se cargue y analice de forma síncrona. Intente agregar un atributo defer a la secuencia de comandos no modular para que se ejecute en el mismo orden que las etiquetas de secuencia de comandos del módulo proporcionadas en la fuente de la página. Cuando se aplaza, la secuencia de comandos no se analizará antes de que se haya analizado el código HTML del cuerpo.
Resumen
Los módulos JavaScript no están diseñados para interactuar con archivos de secuencias de comandos que no sean módulos. La refactorización de scripts no modulares en módulos generalmente se prefiere a soluciones más intrusivas.