En JavaScript, las palabras reservadas export e import son la base del funcionamiento del sistema de módulos ESM.
Ya hemos visto que existen distintos tipos de módulos en JavaScript. La solución estándar son los módulos ESM, que fueron introducidos en 2015.
Siempre que sea posible, debemos usar módulos ESM frente al resto de alternativas, ya que son la forma nativa y estandarizada.
Así que en este artículo vamos a ver en detalle cómo usar módulos ESM, lo cuál se hace mediante las palabras reservadas export e import.
Exportando elementos con export
En primer lugar, un módulo debe exportar los elementos que queramos mediante el uso de la palabra export.
La declaración export hace que ciertas partes del código (funciones, variables, objetos, etc.) sean accesibles desde otros módulos.
Exportar una función
Podemos exportar una función simplemente poniendo export antes de su definición.
// archivo funciones.js
export function suma(a, b) {
return a + b;
}En este ejemplo, la función suma está marcada para ser exportada y estará disponible para ser importada en otros archivos.
Exportar una variable
Además de funciones, también podemos exportar variables, igualmente poniendo export antes de su declaración.
// archivo variables.js
// archivo variables.js
export const PI = 3.1416;Aquí, la constante PI está marcada como exportable y puede ser importada en otros archivos.
Exportar todo al final del archivo ⭐
Sin embargo, la forma más común de exportar elementos es realizarlo al final del archivo utilizando la palabra clave export.
// archivo funciones.js
function suma(a, b) {
return a + b;
}
function resta(a, b) {
return a - b;
}
export { suma, resta };En este caso, exportamos las funciones suma y resta al final del archivo.
Importando elementos con import
Una vez que hemos exportado funciones o variables en un archivo, podemos importarlas en otro archivo utilizando la palabra clave import.
La declaración import se utiliza para traer funciones, objetos, variables, o cualquier otra elemento exportada desde otro módulo, permitiendo que sean utilizadas en el módulo que realiza la importación.
Importar elementos
Importar elementos específicos nos permite seleccionar exactamente lo que necesitamos de otro módulo.
// archivo main.js
import { suma } from './funciones.js';
import { PI } from './variables.js';
console.log(suma(5, 3)); // Resultado: 8
console.log(PI); // Resultado: 3.1416En este ejemplo, importamos la función suma desde el archivo funciones.js y la constante PI desde el archivo variables.js.
Renombrar elementos importados
Si necesitamos evitar conflictos de nombres o mejorar la legibilidad, también podemos renombrar los elementos que importamos.
// archivo main.js
import { suma as sumarNumeros } from './funciones.js';
import { PI as numeroPi } from './variables.js';
console.log(sumarNumeros(5, 3)); // Resultado: 8
console.log(numeroPi); // Resultado: 3.1416Importar todo con *
Cuando un módulo exporta muchos elementos, podemos importarlos todos como un único objeto usando * as nombre.
// archivo main.js
import * as funciones from './funciones.js';
import * as variables from './variables.js';
console.log(funciones.suma(5, 3)); // Resultado: 8
console.log(variables.PI); // Resultado: 3.1416En este caso, funciones y variables serán objetos que contienen todas las exportaciones del archivo correspondiente.
Módulos predeterminados
Los módulos predeterminados son una funcionalidad especial de los módulos ESM que permite exportar un único valor por defecto desde un archivo.
A diferencia de las exportaciones normales, los valores predeterminados no necesitan ser nombrados explícitamente.
Únicamente puede haber una exportación por defecto en cada módulo.
Exportar valor predeterminado
Podemos usar export default para definir un valor predeterminado que será el único exportado por el módulo.
// archivo default.js
const mensaje = 'Hola Mundo';
export default mensaje;Importar valor predeterminado
Al importar un valor predeterminado, no es necesario usar llaves {}. Podemos nombrar el elemento importado como queramos.
// archivo main.js
import mensaje from './default.js';
console.log(mensaje); // Resultado: 'Hola Mundo'Reexportación de elementos
Si es necesario, también puedes reexportar elementos de otros módulos. Por ejemplo, es útil para consolidar exportaciones en un único módulo.
// index.js
export { fetchData, url } from './utils.js';Con esta técnica, otros módulos pueden importar fetchData y url directamente desde index.js, lo que simplifica las dependencias.