¿Qué son los módulos ES?

Los módulos ES son la forma estándar de organizar el código en JavaScript, basada en la sintaxis import y export.

Características principales:

• Estándar: Parte de la especificación ECMAScript, soportada por la mayoría de los navegadores modernos y entornos de ejecución como Node.js.
• Gestión explícita de dependencias: Los módulos indican claramente qué valores exportan y qué valores importan de otros módulos.
• Estructura estática: Las dependencias de los módulos se determinan en tiempo de compilación (o análisis), no en tiempo de ejecución. Esto permite a herramientas de análisis estático, como bundlers (Webpack, Rollup), optimizar el código.
• Aislamiento: Cada variable, función o clase declarada dentro de un módulo es, por defecto, local a ese módulo. Para que sean accesibles desde fuera, deben exportarse explícitamente.
• Soporte para asincronía: Los módulos pueden cargarse de forma asíncrona en los navegadores, sin bloquear la carga de la página.

Sintaxis:

• Exportación:

  // app.js
  export const myVariable = 123; // Exportación con nombre
  export function myFunction() { // Exportación con nombre
    console.log('¡Hola desde el módulo!');
  }
  export default class MyClass { // Exportación por defecto
    constructor() {
      console.log('Instancia de MyClass creada');
    }
  }
  

• Importación:

  // main.js
  import { myVariable, myFunction } from './app.js'; // Importación con nombre
  import MyDefaultClass from './app.js'; // Importación por defecto
  
  console.log(myVariable); // 123
  myFunction(); // ¡Hola desde el módulo!
  const instance = new MyDefaultClass(); // Instancia de MyClass creada
  

Comparación con CommonJS (Node.js):

Característica	Módulos ES	CommonJS
Sintaxis	import, export	require, module.exports, exports
Dependencias	Estáticas (se determinan antes de la ejecución)	Dinámicas (se determinan en tiempo de ejecución)
Carga	Asíncrona (en el navegador)	Sincrónica
this en raíz	undefined	module.exports
Soporte	Navegadores, Node.js (por defecto desde la versión 13.2, mediante la bandera --experimental-modules antes)	Principalmente Node.js

El uso de módulos ES es el enfoque recomendado para el desarrollo frontend moderno debido a su estandarización, mejor soporte por herramientas y capacidad de análisis estático.