Una introducción sobre cómo exportar e importar módulos JavaScript

Una introducción sobre cómo exportar e importar módulos JavaScript

Parece haber cierta confusión cuando se trata de módulos JavaScript. Algunos desarrolladores no están seguros de cómo funcionan y por qué hay varias formas de usarlos. Para aclarar algunos de estos conceptos erróneos, este artículo explicará las diferentes formas en que puede exportar e importar módulos.

Primero, exploremos los antecedentes de los módulos JavaScript.

Los programas de JavaScript comenzaron como simples scripts o aplicaciones que tenían bases de código bastante pequeñas. Pero con el tiempo, evolucionó y también sus usos, lo que significa que ha habido un aumento en el tamaño de las bases de código. Para soportar este aumento, el lenguaje necesario para soportar un mecanismo bajo el cual era posible separar o dividir el código en unidades más pequeñas y reutilizables. Node.JS tuvo esa capacidad por un tiempo antes de que se incorporara en JavaScript con una función llamada "módulos". Finalmente, llegaron al lenguaje en sí y a los navegadores.

Por definición, un módulo es solo un archivo que puede importarse desde otros módulos (o archivos) mediante la ayuda de directivas como export y import:

  • export: la palabra clave etiqueta las variables y funciones a las que se debe poder acceder desde fuera del módulo actual.
  • import: permite la importación de funcionalidades desde otros módulos.

Pero, volveremos a más de eso más tarde. Ahora, echemos un vistazo a un ejemplo.

Para demostrar el uso de módulos crearemos un simple user módulo eso expondrá un User clase. Revisemos la estructura básica del proyecto:

Nuestra aplicación será muy simple y mostrará el nombre de un usuario en la pantalla, pero lo interesante es que el nombre vendrá de una instancia de objeto del User clase. Veámoslo en acción con una demostración en vivo:

Usuario del módulo exportador

Lo primero que se requiere para acceder al User clase es exportarlo desde el módulo. Para hacer esto, necesitamos hacer uso de export declaración.

La declaración de exportación se usa al crear módulos JavaScript para exportar enlaces activos a funciones, objetos o valores primitivos del módulo para que otros programas puedan usarlos con la declaración de importación.

Veamos eso en nuestro código:

Ahora que el módulo se exportó, podemos usarlo en otros módulos simplemente importándolo.

Cómo importar un usuario de módulo

La declaración de importación estática se usa para importar enlaces activos de solo lectura que son exportados por otro módulo. Los módulos importados están en modo estricto, ya sea que los declare como tales o no. La declaración de importación no se puede usar en scripts incrustados a menos que un script tenga un tipo = "módulo". Los enlaces importados se denominan "enlaces activos" porque el módulo que exportó el enlace los actualiza.

Veámoslo en nuestro ejemplo:

los import declaración nos permite importar enlaces específicos desde un módulo. Hay varias formas diferentes de especificar lo que estamos importando, y lo discutiremos más adelante en este artículo. Por ahora, en nuestro ejemplo, solo estamos importando User desde el módulo o archivo especificado.

Después de importar, podemos usar ese objeto como parte del mismo archivo.

Exportaciones predeterminadas versus exportaciones nombradas

Hasta ahora, hemos exportado una clase por su nombre, pero hay dos formas diferentes de exportar desde módulos:

  • Exportaciones con nombre (cero o más exportaciones por módulo)
  • Exportaciones predeterminadas (solo una por módulo)

Estos son algunos ejemplos de "exportaciones con nombre":

Y, "exportaciones predeterminadas":

Las exportaciones con nombre son útiles para exportar varios valores. Durante la importación, es obligatorio usar el mismo nombre que el objeto correspondiente. Pero una exportación predeterminada se puede importar con cualquier nombre. Por ejemplo:

Cuando se utilizan exportaciones con nombre, también es posible asignar un nombre personalizado al valor exportado como en el siguiente ejemplo a continuación:

El valor exportado ahora se puede importar como newName más bien que name.

Ahora, pasemos a "importar"

Ya vimos algunos ejemplos de cómo podemos importar exportaciones con nombre o predeterminadas de los módulos. Pero aquí hay más opciones cuando se trata de importar.

Cómo importar una exportación predeterminada

Cómo importar una exportación con nombre

Cómo cambiar el nombre de una importación

Cómo importar todo desde un módulo

Hasta ahora, todas las formas que hemos descrito aquí son importaciones estáticas, lo que significa que las coloca en la parte superior de su archivo y el contenido del módulo siempre se importa. Pero esto no siempre tiene que ser el caso, también puede tener importaciones dinámicas.

¿Qué son las importaciones dinámicas?

Esto le permite cargar dinámicamente módulos solo cuando son necesarios, en lugar de tener que cargar todo por adelantado. Esto tiene algunas ventajas obvias de rendimiento. Sigamos leyendo y veamos cómo funciona.

Esta nueva funcionalidad le permite llamar a import () como una función, pasándole la ruta al módulo como parámetro. Devuelve una promesa, que se cumple con un objeto de módulo que le da acceso a las exportaciones de ese objeto. Por ejemplo:

Combinando exportaciones predeterminadas y con nombre

Sí, lo leiste bien. Es posible combinar valores predeterminados y con nombre y, como ya podría haber esperado, puede importarlos a ambos. Veamos un ejemplo:

Y podemos importarlos usando cualquiera de los siguientes escenarios:

Los módulos de JavaScript son una característica poderosa que nos permite organizar mejor nuestro código, pero también nos permite compartir módulos entre proyectos. Espero que hayas disfrutado y aprendido algo nuevo hoy.

Este artículo fue publicado originalmente en Transmisión de código en vivo por Juan cruz martinez, fundador y editor de Live Code Stream. Es ingeniero de software con más de 10 años de experiencia en el campo, trabajando en una amplia variedad de proyectos, desde soluciones de código abierto hasta aplicaciones empresariales. Felizmente casado, con un hijo, comprometido oficialmente con JavaScript, en una relación de amor con Python, ¡y persiguiendo el sueño del escritor! Puedes leer esta pieza original aquí.

Transmisión de código en vivo también está disponible como un boletín semanal gratuito. Regístrese para recibir actualizaciones sobre todo lo relacionado con la programación, la inteligencia artificial y la informática en general.

Pssst, ¡hola!

¿Desea recibir el boletín técnico diario más atrevido todos los días, en su bandeja de entrada, GRATIS? Por supuesto que sí: regístrate en Big Spam aquí.

Deja un comentario