O que são módulos ES?

Os módulos ES são a forma padrão de organizar o código em JavaScript, baseados na sintaxe import e export.

Principais características:

• Padrão: Parte da especificação ECMAScript, suportada pela maioria dos navegadores modernos e ambientes de execução como Node.js.
• Gestão explícita de dependências: Os módulos indicam claramente quais os valores que exportam e quais os valores que importam de outros módulos.
• Estrutura estática: As dependências dos módulos são determinadas na fase de compilação (ou análise), não em tempo de execução. Isto permite às ferramentas de análise estática, como bundlers (Webpack, Rollup), otimizar o código.
• Isolamento: Cada variável, função ou classe declarada dentro de um módulo é, por padrão, local a esse módulo. Para serem acessíveis de fora, devem ser explicitamente exportadas.
• Suporte à assíncronia: Os módulos podem ser carregados de forma assíncrona nos navegadores, sem bloquear o carregamento da página.

Sintaxe:

• Exportação:

  // app.js
  export const myVariable = 123; // Exportação nomeada
  export function myFunction() { // Exportação nomeada
    console.log('Olá do módulo!');
  }
  export default class MyClass { // Exportação padrão
    constructor() {
      console.log('Instância de MyClass criada');
    }
  }
  

• Importação:

  // main.js
  import { myVariable, myFunction } from './app.js'; // Importação nomeada
  import MyDefaultClass from './app.js'; // Importação padrão
  
  console.log(myVariable); // 123
  myFunction(); // Olá do módulo!
  const instance = new MyDefaultClass(); // Instância de MyClass criada
  

Comparação com CommonJS (Node.js):

Característica	Módulos ES	CommonJS
Sintaxe	import, export	require, module.exports, exports
Dependências	Estáticas (definidas antes da execução)	Dinâmicas (definidas em tempo de execução)
Carregamento	Assíncrono (no navegador)	Síncrono
this na raiz	undefined	module.exports
Suporte	Navegadores, Node.js (por padrão desde a versão 13.2, via a flag --experimental-modules até então)	Principalmente Node.js

O uso de módulos ES é a abordagem recomendada para o desenvolvimento frontend moderno devido à sua padronização, melhor suporte pelas ferramentas e capacidade de análise estática.