Importar módulos de JavaScript de forma dinámica en el navegador

Matías Hernández: [0:00] Utilizando la sintaxis import('./module.js') es posible importar módulos de forma dinámica directamente en el navegador. Está sintaxis de tipo función retorna una promesa por lo que es posible utilizar la sintaxis then().catch(). Para acceder al módulo, utilizamos el método then().

[0:16] Luego simplemente accedemos a la función exportada por defecto y la ejecutamos. Ahora podemos ver si valor en consola y en caso de que hubiera error utilizamos el bloque catch() y podemos mostrar en consola el error.

[0:33] Guardamos refrescamos el navegador y podemos ver el resultado en la consola del navegador. El módulo importado en este caso contiene solamente una función de edición, una llamada a export default. Podemos hacer uso de todos los métodos de promesa.

¿[0:45] Cómo? Por promise.all. En este ejemplo, construimos una función que importa dos módulos y utiliza promise.all para esperar ambos módulos.

[0:56] Luego, simplemente se ejecuta la función y se accede a ellos por medio del método then(). Aquí ambos módulos tienen importaciones por defecto y podemos ver en la consola del navegador el resultado después de refrescar. El móduloB tan solo contiene una función de sustracción y una llamada a export default.

[1:13] También es posible utilizar esta sintaxis en métodos más complejos como importar en base a una condición. En este caso, al cliquear un botón. Al hacer clic en el botón se importa el módulo y se espera que la promesa sea resuelta utilizando async y await.

[1:28] Al refrescar el navegador, podemos ver el botón en pantalla y al hacer click se ejecuta la importación y podemos ver el resultado en la consola. Es también adecuado notar que es posible importar módulos con nombre.

[1:39] En este caso, se importa la función add() desde el móduloC que contiene dos funciones, una de adición y otra de sustracción exportadas con sus nombres. Finalmente, en nuestro evento de click, accedemos a la función de adición directamente por su nombre luego de la importación.

[1:54] Esta nueva API nos permite también importar módulos con nombres generados dinámicamente utilizando template literals. En este caso, generamos el nombre de uno de los módulos utilizando random. Para esto, utilizamos template literals como argumento de la función import(). Luego al refrescar el navegador y cliquear el botón, se importan módulos diferentes.

[2:16] En resumen, JavaScript nos ofrece importaciones dinámicas de la misma forma que webpack ya lo hacía utilizando la sintaxis import función que retorna una promesa que nos permite utilizar todos los métodos de la API promesa como async y await para así importar de forma programática cualquier módulo que necesitemos de forma nativa directamente en el navegador.