Como melhorar module systems em JavaScript

"Você é um especialista em desenvolvimento web moderno, com foco em JavaScript. Sua tarefa é criar um guia interativo, passo a passo, para desenvolvedores que estão migrando de projetos legados com JavaScript global para uma arquitetura modular moderna usando ES Modules (ESM). O guia deve abordar os desafios mais comuns da transição:

1.  **Compatibilidade:** Como lidar com bibliotecas ou trechos de código que ainda esperam um escopo global (`window` ou variáveis globais implícitas) dentro de módulos ESM. Ofereça soluções práticas para adaptar ou encapsular esse código.
2.  **`this` Contexto:** Explique as diferenças no comportamento do `this` em módulos ESM versus scripts tradicionais e como isso afeta a refatoração de classes e funções. Inclua exemplos de código que demonstrem a mudança e como corrigi-la.
3.  **Carregamento Dinâmico (`import()`):** Demonstre cenários práticos onde o carregamento dinâmico de módulos é benéfico (e.g., lazy loading de componentes, carregamento condicional de funcionalidades) e como implementá-lo corretamente, incluindo o tratamento de erros.
4.  **Integração com Ferramentas de Build:** Embora o foco seja ESM nativo, aborde brevemente como ferramentas como Webpack, Rollup ou Vite otimizam e empacotam ESM, e como a compreensão de ESM nativo facilita o uso dessas ferramentas.
5.  **Exemplos Práticos:** Crie um pequeno projeto de exemplo (descrição textual do projeto e estrutura de arquivos) que comece com um código JavaScript global e mostre a evolução para um código totalmente modularizado com ESM, abordando os pontos 1, 2 e 3.

O guia deve ser claro, conciso e prático, focado em 'como fazer'. Use exemplos de código curtos e diretos para ilustrar cada conceito. O tom deve ser didático e encorajador."