Módulos en JavaScript: introducción a import y export (ES6)

En este capítulo vamos a ver los módulos y las importaciones/exportaciones en JavaScript. Veremos cómo usar estas herramientas para organizar y compartir el código de forma más eficaz, y cómo importar y exportar datos entre archivos distintos de manera segura. También veremos cómo aplicar estas funcionalidades en nuestro código con ejemplos concretos y prácticos.

Los módulos y las importaciones/exportaciones forman parte de la especificación ECMAScript 6 (ES6), introducida en 2015. Todos los navegadores actuales los admiten de forma nativa: un transpilador como Babel o un bundler como Webpack solo sirve ya para apuntar a navegadores muy antiguos, o para agrupar los archivos.

¿Qué es un módulo en JavaScript (ES6)?

Los módulos son una forma de estructurar y organizar el código repartiéndolo en varios archivos independientes. Eso facilita entender y mantener el código a largo plazo, porque mejora la legibilidad y la reutilización de sus distintas partes.

Principio de los módulos y ventajas

El principio de los módulos se basa en el uso de la instrucción «export» para hacer accesibles ciertas partes del código desde fuera del módulo. Así se ocultan las partes que el usuario final no necesita y solo se exporta lo pertinente.

Las ventajas de usar módulos son muchas. Primero, evitan los conflictos de nombres al aislar las distintas partes del código, algo especialmente útil cuando se trabaja en equipo en un proyecto grande. Después, permiten organizar y estructurar mejor el código repartiéndolo en archivos más fáciles de mantener. Por último, permiten reutilizar el código sin esfuerzo importándolo en otros proyectos.

Crear un módulo con la instrucción «export»

Para crear un módulo en JavaScript basta con poner la instrucción «export» delante de los elementos que quieres hacer accesibles desde fuera del módulo. Por ejemplo, si quieres exportar una función «saluer» definida en un archivo module.js, puedes escribir:

export function saluer() {
  console.log("Bonjour !");
}

También se pueden exportar varios elementos de un módulo poniendo la instrucción «export» delante de cada uno de ellos. Por ejemplo:

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

También puedes usar la instrucción «export default» para designar un elemento por defecto en tu módulo. Eso significa que, si no importas explícitamente un elemento del módulo, se importará el elemento por defecto. Por ejemplo:

export default function maFonctionParDefaut() {
  console.log('Je suis la fonction par défaut');
}

¿Cómo importar un módulo en JavaScript (ES6)?

La gestión de módulos en JavaScript permite separar el código en varios archivos y organizar el proyecto de forma más eficaz. En la sección anterior hemos visto cómo exportar un módulo en JavaScript con la instrucción export. Pero ¿cómo se importa un módulo en nuestro código? Es lo que vamos a ver aquí.

Uso de la instrucción «import»

Para importar un módulo en JavaScript usamos la instrucción import. Este es un ejemplo de uso:

import * as monModule from '/chemin/vers/mon/module';

Esta sintaxis importa todos los elementos del módulo monModule y los guarda en un objeto con el mismo nombre. También puedes indicar qué elementos del módulo quieres importar poniendo la instrucción import seguida de la lista de elementos entre llaves:

import { maFonction, maVariable } from '/chemin/vers/mon/module';

También se pueden importar elementos con nombre de un módulo usando la instrucción «import» seguida de la sintaxis «{ nom1 as alias1, nom2 as alias2 }», así:

import { nom1 as alias1, nom2 as alias2 } from 'module';

Para importar una clase o una función que está en export default se hace así:

export

export default class MonModule {
  constructor() {
    console.log('Je suis une classe');
  }
}

import MonModule from 'module';

Cuando se usan la importación por defecto y la importación con nombre en el mismo módulo, conviene poner primero la importación por defecto, así:

import MonModule, { maFonction } from './monModule';

// uso de la importación por defecto
const monModule = new MonModule();

// uso de la importación con nombre
maFonction();

Por último, también existe la importación dinámica con el método «import()», que carga un módulo de forma asíncrona. Resulta útil cuando solo quieres cargar un módulo en el momento en que hace falta, para no sobrecargar el navegador sin motivo.

import('./monModule').then(monModule => {
  // uso de los elementos importados
  monModule.maFonction();
  monModule.maVariable;
});

¿Cómo usar módulos en el navegador?

Ya hemos visto cómo crear y exportar módulos con la instrucción «export» y cómo importarlos con la instrucción «import». Conviene recordar, sin embargo, que estas instrucciones aún no están soportadas por todos los navegadores. Para usar módulos en un navegador hay varias soluciones, que se presentan en esta sección.

Uso del atributo «type=module» en las etiquetas «script»

Para usar módulos en el navegador hay que indicar el atributo «type=module» en la etiqueta «script» de tu archivo JavaScript. Así le dices al navegador que el archivo es un módulo y que debe tratarlo de forma distinta a un script normal. Este es un ejemplo de código:

<script type="module" src="./script.js"></script>

module.js

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

script.js

import { maVariable, maFonction, MaClasse } from './module.js';

console.log(maVariable); // Muestra 'ma variable'

Uso de bundlers como Webpack

Otra forma de cargar módulos en el navegador es usar un bundler. Un bundler es una herramienta que agrupa varios módulos y archivos JavaScript en un único archivo, más fácil de cargar para el navegador. Webpack es un bundler popular que ofrece muchas funciones avanzadas para la gestión de módulos. Si quieres aprender a usar Webpack, he escrito un tutorial sobre el tema.

Conclusión

Hemos visto cómo crear un módulo con la instrucción «export» y cómo importar un módulo con la instrucción «import». También hemos visto cómo gestionar las rutas y el entorno al importar módulos, además del uso de las importaciones/exportaciones por defecto y con nombre. Por último, hemos visto cómo usar módulos en el navegador con el atributo «type=module» en las etiquetas «script».

Este tutorial te ha dado las bases para empezar a programar en JavaScript y te ha permitido entender los conceptos clave del lenguaje. Ahora puedes seguir aprendiendo y especializarte en distintos campos, como el desarrollo web. ¡Te deseo mucho ánimo para continuar y mucho éxito en tus próximos proyectos!