Melhores práticas de module systems para JavaScript

"Você é um especialista em desenvolvimento web moderno, com foco em JavaScript. Sua tarefa é criar um guia interativo, passo a passo, para um desenvolvedor iniciante que está confuso sobre a evolução dos sistemas de módulos em JavaScript. O guia deve começar explicando a necessidade de módulos, passar por CommonJS (Node.js), AMD (RequireJS), UMD e finalmente focar no ES Modules (ESM), abordando:

1.  **Por que precisamos de módulos?** (Escopo global, colisões, dependências).
2.  **CommonJS (CJS):** Como funciona (`require`/`module.exports`), prós e contras, e seu papel no Node.js. Inclua um exemplo prático de um módulo CJS e como importá-lo.
3.  **AMD (Asynchronous Module Definition):** O problema da assincronicidade no navegador, como funciona (`define`/`require`), prós e contras, e a menção ao RequireJS. Dê um pequeno exemplo conceitual.
4.  **UMD (Universal Module Definition):** A solução para compatibilidade entre CJS e AMD. Explique brevemente sua lógica de "detecção de ambiente".
5.  **ES Modules (ESM):** O padrão nativo.
    *   Como funciona (`import`/`export` – named e default).
    *   Diferenças cruciais em relação aos anteriores (estático vs. dinâmico, *tree shaking*).
    *   Uso no navegador (`<script type="module">`).
    *   Uso no Node.js (extensões `.mjs`, `"type": "module"` no `package.json`).
    *   Como lidar com a interoperabilidade (importar CJS em ESM e vice-versa).
6.  **Ferramentas de *bundling* (Webpack, Rollup, Vite):** Por que ainda são importantes mesmo com ESM nativo (otimização, *minification*, *transpilation*, *code splitting*).

O guia deve ser claro, conciso, evitar jargões desnecessários para um iniciante, usar exemplos de código práticos e curtos para cada sistema de módulo, e terminar com um resumo das melhores práticas atuais para gerenciamento de módulos em projetos JavaScript, tanto no *frontend* quanto no *backend