💡 Quer estudar, prototipar ou estruturar um projeto com MF (Microfrontend) de forma modular e performática?
Nos últimos dias, mergulhei em um experimento que pode facilitar (e muito!) a vida de quem trabalha com micro frontends no dia a dia.
🎯 Criei um repositório open source usando:
- Rsbuild (alternativa moderna e rápida ao Webpack)
- Module Federation para isolar e compartilhar componentes entre apps
- pnpm + Lerna pra orquestrar tudo de forma leve e organizada
📂 Estrutura simples, mas poderosa:
- apps/mf_provider: expõe componentes
- apps/mf_consumer: consome via Module Federation
- Tudo rodando em paralelo com pnpm dev
🔗 Confere lá e, se curtir, arrocha um like ou manda feedback!
Repositório no Github
Algumas curiosidades
Catalogs
O pnpm tem um recurso bem legal chamado Catalogs. Ele serve para definir versões de dependências como constantes, que podem ser reutilizadas nos módulos internos dentro do package.json de cada projeto.
Exemplo:
# pnpm-workspace.yaml
# Define a catalog of version ranges.
catalog:
react: "^18.3.1"
react-dom: "^18.3.1"# Nos módulos internos, consigo reutilizar a versão definida no pnpm-workspace.yaml
"dependencies": {
"react": "catalog",
"react-dom": "catalog"
}Lerna e o paralelismo
Outra curiosidade bem legal é a praticidade que o Lerna oferece na criação de um monorepo, permitindo executar vários apps juntos de forma paralela com um único comando, como no exemplo abaixo:
"dev": "lerna run --parallel dev",Conclusão
Rsbuild + Module Federation se mostrou extremamente simples de estruturar e entender, especialmente se comparado ao uso do plugin com Webpack. No próximo artigo, trarei um exemplo utilizando Vite para termos uma ideia prática.
Até mais.
Curtiu a ideia ou tá explorando algo parecido? Bora trocar ideia.
