En el lado del cliente, quiero importar solo una parte específica de mi módulo Javascript. Pero quiero hacerlo a pedido, como cuando un usuario realiza una acción que necesita esa parte específica del módulo. Pude lograr eso en el archivo HTML, con:
<script type="module"> import { sayHi } from "/public/js/sayHi.js"; sayHi("John"); </script>Ahora quiero hacer lo mismo pero en mi archivo JS del lado del cliente, para ejecutar esta carga cuando quiera (y no en la carga de la página, como en el ejemplo anterior). Lo más cerca que estuve de resolverlo fue ejecutar esto en mi archivo JS del lado del cliente:
import("/public/js/sayHi.js")Pero el problema es que este último script carga todo el módulo, no solo la parte que quiero. Si trato de hacer esto:
import { sayHi } from "./sayHi.js";Aparece el error "No se puede usar la declaración de importación fuera de un módulo".
¿Cómo puedo importar solo la parte {sayHi} a través de mi JS del lado del cliente?
PD: solo para dar un ejemplo, me gustaría tener algo así en mi JS del lado del cliente:
buttonX.addEventListener('click', async () => { const a = await import { sayHi } from "./sayHi.js";; });Carga todo el módulo, no solo la parte que quiero
Siempre lo hace, no puedes evitarlo. Esto también sucede cuando usa import {…} from '…' - simplemente no importa todo en el alcance del módulo actual. Al igual que cuando llamas a import(…) , no tienes que usar todas las partes disponibles:
buttonX.addEventListener('click', async () => { const { sayHi: a } = await import("./sayHi.js"); a(); });