Como funcionam os módulos nos ES Modules?

Os módulos em ES Modules funcionam com base numa análise estática das importações e exportações. O navegador ou o ambiente de execução analisa os ficheiros JavaScript, determina as dependências entre os módulos antes de executar o código e cria um gráfico de dependências.

Princípios de funcionamento:

• Análise estática: As importações e exportações são determinadas antes de executar o código, permitindo otimizar o carregamento e detectar erros em fases iniciais.
• Ligação unívoca: Cada importação liga-se a uma exportação concreta noutro módulo.
• Instância única: O módulo é executado apenas uma vez na primeira importação. Todas as importações subsequentes obtêm uma referência à mesma instância.

Ciclo de vida do módulo:

1. Construção: O código fonte do módulo é analisado, identificam-se as importações e exportações. Cria-se uma envoltória do módulo.
2. Carregamento: São carregados todos os módulos importados. Se a dependência não estiver em cache, é feita uma requisição à rede ou ao sistema de ficheiros.
3. Ligação: As importações e exportações são ligadas. As variáveis e funções dos módulos importados ficam disponíveis para uso. Se a importação não puder ser resolvida, é lançada uma erro.
4. Execução: O código do módulo é executado. Todos os valores exportados ficam disponíveis para os módulos que os importam.

Exemplos:

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

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

console.log(name); // Saída: Alice
sayHello(); // Saída: Hello, Alice!

Diferenças do CommonJS:

Característica	ES Modules	CommonJS
Ligação	Estática	Dinâmica
Carregamento	Assíncrono (no navegador)	Síncrono (por padrão)
Exportação	palavra-chave export	module.exports
Importação	palavra-chave import	require função
Utilização	No navegador e Node.js (experimental)	No Node.js