Los módulos son una característica de JavaScript que permiten organizar y reutilizar código en unidades independientes y reutilizables.
A efectos prácticos, un módulo es un archivo que contiene código JavaScript. Este código puede incluir variables, funciones, clases (o cualquier otra cosa que se pueda definir en JavaScript).
Cada uno de estos archivos (que llamamos módulos) puede exportar ciertas funcionalidades, que pueden ser obtenidas desde otros ficheros, para que puedan utilizarlas.
Además de favorecer la organización, cada módulo es un bloque independiente de código. Es decir, que si código no va a tener colisiones con otros ficheros (por ejemplo, nombres repetidos).
Ventajas de usar módulos:
- Reutilización de código: Puedes usar el mismo módulo en múltiples proyectos.
- Mantenimiento: Facilitan la organización y actualización del código.
- Evitar conflictos: Protegen el código encapsulándolo en su propio contexto.
Tipos de módulos en JavaScript
Con la llegada ECMAScript 2015, se introdujo un sistema de módulos estándar para JavaScript, que facilita una sintaxis uniforme para la importación y exportación de funcionalidades.
Pero, antes de la introducción de los módulos ES6, el ecosistema de JavaScript experimentó con varias soluciones para la modularidad.
Vamos a revisar los principales sistemas de módulos que existen (o existieron).
Módulos ES
Los módulos ES (ECMAScript Modules) son el estándar moderno de JavaScript para gestionar módulos. Fueron introducidos oficialmente en ES6 (2015) y se utilizan tanto en navegadores como en entornos como Node.js.
- Soportados nativamente por navegadores modernos.
- Usa las palabras clave
importyexport. - Cada archivo es un módulo independiente con su propio ámbito.
Exportar
// archivo: matematicas.js
export const sumar = (a, b) => a + b;
export const restar = (a, b) => a - b;Importar
// archivo: app.js
import { sumar, restar } from './matematicas.js';
console.log(sumar(5, 3)); // 8
console.log(restar(5, 3)); // 2Módulos CommonJS
Los módulos CommonJS fueron la forma principal de gestionar módulos en Node.js antes de la adopción de ESM.
A diferencia de ESM, los módulos CommonJS usan las palabras clave require y module.exports.
- Usados principalmente en Node.js.
- Síncronos, lo que puede ser una limitación en navegadores.
- Compatibles con versiones antiguas de JavaScript.
Exportar
// archivo: matematicas.js
const sumar = (a, b) => a + b;
const restar = (a, b) => a - b;
module.exports = { sumar, restar };Importar
// archivo: app.js
const { sumar, restar } = require('./matematicas');
console.log(sumar(5, 3)); // 8
console.log(restar(5, 3)); // 2Módulos AMD
Los módulos AMD (Asynchronous Module Definition) es un formato de módulo diseñado principalmente para su uso en navegadores.
Fue popularizado por librerías como RequireJS y surgió como una solución para cargar módulos de forma asíncronaÑ.
- Carga asíncrona de dependencias.
- Diseñado para trabajar directamente en navegadores.
- Muy utilizado antes de la introducción de los ES Modules.
- Compatible con scripts cargados de forma dinámica.
Exportar
// archivo: matematicas.js
define(['dependencia1', 'dependencia2'], function (dependencia1, dependencia2) {
return {
sumar: function (a, b) {
return a + b;
},
restar: function (a, b) {
return a - b;
},
};
});Importar
// archivo: app.js
require(['matematicas'], function (matematicas) {
console.log(matematicas.sumar(5, 3)); // 8
});Módulos UMD
Los módulos UMD (Universal Module Definition) son un formato híbrido diseñado para ser compatible con diferentes entornos, como navegadores y Node.js.
- Compatibles tanto con CommonJS como con AMD (Asynchronous Module Definition).
- Usados en librerías que necesitan funcionar en múltiples entornos.
(function (global, factory) {
if (typeof module === "object" && typeof module.exports === "object") {
// CommonJS
module.exports = factory();
} else {
// Navegador
global.miModulo = factory();
}
})(this, function () {
return {
saludar: function () {
return "Hola!";
},
};
});Prefiere módulos ES sobre los demás: Siempre que sea posible, usa ESM, ya que es el estándar moderno.