Estoy aprendiendo a usar los módulos js correctamente. Entonces tengo mi main.js donde tengo algo de lógica sobre qué js cargar. Para resumir, cargo los scripts usando importaciones de condiciones.
entonces tengo algo como esto
principal.js
import("/path/to/module").then(module => { if (typeof module != "undefined") { module.default.render && module.default.render(); } else { throw new Error(module + "is not a module"); } }); No hay mucho que ver en el HTML. Lo tengo al final del cuerpo así <script src="main.js"></script> Ejecuta el script principal donde defino mi espacio de nombres y tiene todo tipo de funciones. Importa dinámicamente los módulos y todos funcionan muy bien. Si bien el script principal no es type="module", creo que los scripts importados que usan import() deberían actuar como módulos. El único problema que tengo es con la importación de bibliotecas de terceros adicionales.
Esto carga mis scripts correctamente. Todos mis scripts en mi carpeta se cargan, incluso mis bibliotecas de terceros. Pero no son accesibles desde fuera de sus módulos. Por ejemplo, quiero importar script1 que también importa jQuery, de lo contrario no puedo usarlo en él. (O digamos que quiero importar una biblioteca de carrusel en mi script1, que la inicializaría. Sé cómo exportar e importar mis propios scripts y usarlos, pero tengo problemas con las bibliotecas de terceros. ¿Cómo importo jquery? ¿Necesita editar de alguna manera el código ya minimizado o algo así? Mis módulos se ven así
script1:
//I wanna import jquery here // something like import $ from 'path/jquery/'; export default { render: function() { }, ... }Intenté editar el archivo jquery minimizado agregando algo como esto al final del archivo, jquery3.6.min.js:
//minified jquery oneliner here... export {$} o module.exports = {$}
pero eso devuelve varios errores.
Traté de no tocar el jQuery minimizado en absoluto y solo llamé
import $ from "jquery"en script1.js pero eso me da
Uncaught (in promise) SyntaxError: The requested module '/-a51---tcFORo5D/jquery' does not provide an export named 'default'¿Cuál es la forma correcta de hacer esto? El objetivo de lo que estoy tratando de lograr es poder importar bibliotecas de terceros en mis scripts solo cuando sea necesario para no cargar archivos grandes cuando no son necesarios. Además, no estoy usando NPM ni ningún otro sistema. Quiero saber cómo se puede lograr esto en js puro.