¿Cómo funcionan los módulos en ES Modules?

Los módulos en ES Modules funcionan basándose en un análisis estático de las importaciones y exportaciones. El navegador o el entorno de ejecución analizan los archivos JavaScript, determinan las dependencias entre los módulos antes de ejecutar el código y crean un gráfico de dependencias.

Principios de funcionamiento:

• Análisis estático: Las importaciones y exportaciones se determinan antes de ejecutar el código, lo que permite optimizar la carga y detectar errores en etapas tempranas.
• Vinculación unívoca: Cada importación se vincula con una exportación concreta en otro módulo.
• Instancia única: El módulo se ejecuta solo una vez en la primera importación. Todas las importaciones posteriores obtienen una referencia a la misma instancia.

Ciclo de vida del módulo:

1. Construcción: Se analiza el código fuente del módulo, se identifican las importaciones y exportaciones. Se crea un envoltorio del módulo.
2. Carga: Se cargan todos los módulos importados. Si la dependencia no está en caché, se realiza una solicitud a la red o al sistema de archivos.
3. Vinculación: Se vinculan las importaciones y exportaciones. Las variables y funciones de los módulos importados están disponibles para su uso. Si no se puede resolver la importación, se lanza un error.
4. Ejecución: Se ejecuta el código del módulo. Todos los valores exportados están disponibles para los módulos que los importan.

Ejemplos:

// moduleA.js
export const name = 'Alice';
export function sayHello() {
  console.log(`Hello, ${name}!`);
}

// moduleB.js
import { name, sayHello } from './moduleA.js';

console.log(name); // Salida: Alice
sayHello(); // Salida: Hello, Alice!

Diferencias con CommonJS:

Característica	ES Modules	CommonJS
Vinculación	Estática	Dinámica
Carga	Asíncrona (en el navegador)	Sincrónica (por defecto)
Exportación	Palabra clave export	module.exports
Importación	Palabra clave import	Función require
Uso	En navegador y Node.js (experimental)	En Node.js