Executando verificação de segurança...
1

[Dúvida] Qual a melhor forma de compartilhar componentes visuais em múltiplos projetos Reactjs?

Estou trabalhando em um projeto de um sistema administrativo com vários módulos que serão projetos separados, todos bem parecidos visualmente. O sitema tem um design system próprio, esses componentes virariam mais ou menos um "material ui" da vida para o sistema.

Carregando publicação patrocinada...
2

Você pode transformar tudo em um menorepo, que talvez dê muito trabalho. Mas nesse caso o melhor caminho é transformar tudo em uma lib e publicar no npm.

Por fins de privacidade talvez seja útil publicar a biblioteca de forma privada

1

Vocë ja teve alguma experiencia em algum desses cenários? Um monorepo me parece ter mais desvantagens do que vantatens nesse caso né? Em um monorepo como ficaria a questão das dependencias? Seria algo assim para que os projetos possam compartilhar os componentes entre si?

Monorepo

  • projeto 1
    
  • projeto 2 
    
  • projeto 3
    
  • projeto 4
    
  • projeto 5
    
  • projeto 7
    

package.json(dependencias de todos os projetos)

1

Em um monorepo você teria uma raiz que conteria as dependências compartilhadas do projeto, daí cada subprojeto do monorepo teria as suas próprias dependências. Isso tem sim vantagens, não é atoa que muitos projetos gigantescos são monorepos, mas óbviamente o que é bom para um não necessariamente será bom para outros. Seria mais ou menos assim:

Monorepo
package.json (dependências comuns de todos os projetos, typescript, eslint, jest e etc.

packages/
    projeto 1
        package.json (dependências somente do projeto 1)
    projeto 2
        package.json (dependências somente do projeto 2)
     
     

Outra coisa possível também é instalar o projeto 1 como dependência do projeto 2, daí seria exatamente como funciona com pacotes do npm, o que faria com que você pudesse compartilhar elementos do projeto 1 para o projeto 2. Para fazer isso em cada package manager tem uma forma diferente, então seria necessário fazer uma pesquisa, mas adianto que não é nada tão complicado assim.

Com uma boa configuração de monorepo você pode gerenciar cada projeto a partir da raiz do monorepo, não sendo necessário mover para a pasta de cada projeto, por exemplo:

yarn <nome-do-projeto-1> add <alguma-dependência>
yarn <nome-do-projeto-2> start

Mas tudo tem desvantagens, por exemplo:

  • cada desenvolvedor precisará baixar todos os projetos para a sua máquina, o que pode tornar o processo bem mais pesado (existem formas de burlar isso)
  • é necessário um code review muito mais rigoroso em cada pull request (você não quer que o dev que foi fazer algo em um projeto altere coisas em outros projetos)

Por isso também dei a possibilidade de subir cada repositório no npm, pois dessa forma tudo se manteria como está agora, com apenas dois ou três arquivos de configuração e uma pipeline de CI/CD configurada para subir automaticamente tudo no npm, conforme necessário.

1

Não sabia que dava para fazer esse tipo de configuração com um package.json global e individuais bem massa, vou estudar um pouco mais sobre monorepo, e fazer uns testes, pode ser que seja uma boa, como tudo vai ser bem parecido, talves de pra reutilizar mais coisas do que fazendo uma lib e subindo no npm.

Muito obrigado pela explicação detalhada!