Dicas de module systems para JavaScript

"Você é um especialista em desenvolvimento web moderno. Sua tarefa é criar um guia prático e conciso (máximo 500 palavras) para um desenvolvedor JavaScript intermediário que está confuso sobre qual sistema de módulos usar em um novo projeto front-end. O guia deve abordar as seguintes questões:

1.  **CommonJS vs. ES Modules (ESM):** Explique as principais diferenças conceituais e de uso entre os dois, destacando as vantagens e desvantagens de cada um no contexto de um navegador.
2.  **Compatibilidade e Transpilação:** Como a compatibilidade com navegadores mais antigos afeta a escolha e qual o papel de ferramentas como Babel ou TypeScript nesse cenário.
3.  **Ambientes de Desenvolvimento:** Como Webpack, Rollup ou Vite lidam com os diferentes sistemas de módulos e como isso simplifica o processo para o desenvolvedor.
4.  **Recomendação Prática:** Baseado nos pontos anteriores, forneça uma recomendação clara sobre qual sistema de módulos preferir para um projeto *novo* em 2024, justificando a escolha e apontando cenários específicos onde a outra opção ainda faria sentido (ex: Node.js puro, bibliotecas legadas).

O tom deve ser didático, objetivo e focado em fornecer clareza para a tomada de decisão."