Espaços de trabalho do Yarn: organize a base de código do seu projeto como um profissional

Sempre que começo a trabalhar em um novo projeto, me pergunto: “Devo usar repositórios git separados para meu servidor back-end e meu(s) cliente(s) front-end? Qual é a melhor maneira de organizar a base de código?”

Eu tive essa mesma pergunta depois de alguns meses trabalhando no meu site pessoal. Eu originalmente tinha todo o código no mesmo repositório: o back-end usava Node.js e o front-end usava ES6 com Pug. Adotei essa organização por conveniência, pois ter os dois projetos no mesmo repositório facilitou a busca por funções e classes e facilitou refatorações. No entanto, encontrei algumas desvantagens:

• Sem implantações independentes.
  Ambos os aplicativos estavam usando o mesmo package.json e não havia uma separação clara em ambos os projetos.
• Limites pouco claros.
  Como dependo de um package.json global, não tinha um mecanismo para definir versões específicas para back-end e front-end.
• Utilitários e código compartilhados sem versionamento.

Depois de algumas pesquisas, descobri que os espaços de trabalho do Yarn eram uma ótima ferramenta para resolver esses contras, e era uma ferramenta útil para criar um projeto monorepo (mais para vir mais tarde!).

Neste artigo, compartilho uma introdução aos espaços de trabalho do Yarn. Faremos um tutorial juntos sobre como criar seu primeiro projeto com ele e terminaremos com uma recapitulação e as próximas etapas.

O que são espaços de trabalho de fios?

O Yarn é um gerenciador de pacotes do pessoal do Facebook e possui um ótimo recurso chamado Yarn workspaces. Os espaços de trabalho do Yarn permitem que você organize a base de código do seu projeto usando um repositório monolítico (monorepo). A ideia é que um único repositório contenha vários pacotes. Os pacotes são isolados e podem viver independentes do projeto maior.

Como alternativa, poderíamos colocar todos esses pacotes em repositórios separados. Infelizmente, essa abordagem afeta a capacidade de compartilhamento, a eficiência e a experiência do desenvolvedor ao desenvolver os pacotes e seus projetos dependentes. Além disso, quando trabalhamos em um único repositório, podemos nos mover mais rapidamente e construir ferramentas mais específicas para melhorar os processos de todo o ciclo de vida do desenvolvimento.

Os projetos de monorepo foram amplamente aceitos por grandes empresas como Google ou Facebook, e provaram que o monorepo pode ser dimensionado.

“

React é um bom exemplo de um projeto de código aberto que é monorepo. Além disso, o React usa espaços de trabalho do Yarn para atingir esse objetivo. Na próxima seção, aprenderemos como criar nosso primeiro projeto monorepo com o Yarn.

Criando um projeto Monorepo com React e Express usando espaços de trabalho do Yarn em seis etapas

Até agora, aprendemos o que é o Yarn, o que é um monorepo e por que o Yarn é uma ótima ferramenta para criar um monorepo. Agora vamos aprender do zero como configurar um novo projeto usando espaços de trabalho do Yarn. Para acompanhar, você precisará de um ambiente de trabalho com uma instalação npm atualizada. Baixe o código fonte.

Pré-requisitos

Para concluir completamente este tutorial, você precisará ter o Yarn instalado em sua máquina. Se você não instalou o Yarn antes, siga estas instruções.

Estas são as etapas que seguiremos neste tutorial:

1. Crie seu projeto e espaço de trabalho raiz
2. Crie um projeto React e adicione-o à lista do espaço de trabalho
3. Crie um projeto expresso e adicione-o ao espaço de trabalho
4. Instale todas as dependências e diga Olá para yarn.lock
5. Usando um curinga (*) para importar todos os seus pacotes
6. Adicionar um script para executar os dois pacotes

1. Crie seu projeto e espaço de trabalho raiz

No terminal de sua máquina local, crie uma nova pasta chamada example-monorepo :

 $ mkdir example-monorepo

Dentro da pasta, crie um novo package.json com nosso espaço de trabalho raiz.

 $ cd example-monorepo $ touch package.json

Este pacote deve ser privado para evitar a publicação acidental do espaço de trabalho raiz. Adicione o seguinte código ao seu novo arquivo package.json para tornar o pacote privado:

 { "private": true, "name": "example-monorepo", "workspaces": [], "scripts": {} }

2. Crie um projeto React e adicione-o à lista do espaço de trabalho

Nesta etapa, criaremos um novo projeto React e o adicionaremos à lista de pacotes dentro do espaço de trabalho raiz.

Primeiro, vamos criar uma pasta chamada packages onde adicionaremos os diferentes projetos que criaremos no tutorial:

 $ mkdir packages

O Facebook tem um comando para criar novos projetos React: create-react-app . Vamos usá-lo para criar um novo aplicativo React com todas as configurações e scripts necessários. Estamos criando este novo projeto com o nome “cliente” dentro da pasta de pacotes que criamos no passo 1.

 $ yarn create react-app packages/client

Depois de criarmos nosso novo projeto React, precisamos dizer ao Yarn para tratar esse projeto como um espaço de trabalho. Para fazer isso, basta adicionar “cliente” (o nome que usamos anteriormente) dentro da lista “espaços de trabalho” no pacote raiz.json . Certifique-se de usar o mesmo nome que você usou ao executar o comando create-react-app .

 { "private": true, "name": "example-monorepo", "workspaces": ["client"], "scripts": {} }

3. Crie um projeto expresso e adicione-o ao espaço de trabalho

Agora é hora de adicionar um aplicativo de back-end! Usamos express-generator para criar um esqueleto do Express com todas as configurações e scripts necessários.

Certifique-se de ter express-generator instalado em seu computador. Você pode instalá-lo usando o Yarn com o seguinte comando:

 $ yarn global add express-generator --prefix /usr/local

Usando express-generator , criamos um novo aplicativo Express com o nome “servidor” dentro da pasta de pacotes .

 $ express --view=pug packages/server

Por fim, adicione o novo pacote “servidor” à lista de espaços de trabalho dentro do pacote raiz.json .

 { "private": true, "name": "example-monorepo", "workspaces": ["client", "server"], "scripts": {} }

Nota : Este tutorial é simplificado com apenas dois pacotes (servidor e cliente). Em um projeto, você normalmente pode ter quantos pacotes precisar e, por convenção, a comunidade de código aberto usa este padrão de nomenclatura: @your-project-name/package-name . Por exemplo: eu uso @ferreiro/server no meu site.

4. Instale todas as dependências e diga Olá para yarn.lock

Depois de adicionarmos nosso aplicativo React, bem como nosso servidor Express, precisamos instalar todas as dependências. Os espaços de trabalho do Yarn simplificam esse processo e não precisamos mais acessar todos os aplicativos e instalar suas dependências manualmente. Em vez disso, executamos um comando — yarn install — e o Yarn faz a mágica de instalar todas as dependências de cada pacote, otimizando-as e armazenando-as em cache.

Execute o seguinte comando:

 $ yarn install

Este comando gera um arquivo yarn.lock (semelhante a este exemplo). Ele contém todas as dependências do seu projeto, bem como os números de versão de cada dependência. O Yarn gera esse arquivo automaticamente e você não deve modificá-lo.

5. Usando um curinga (*) para importar todos os seus pacotes

Até agora, para cada novo pacote que adicionamos, fomos forçados a atualizar também o root package.json para incluir o novo pacote na lista workspaces:[] .

Podemos evitar esta etapa manual usando um curinga (*) que diz ao Yarn para incluir todos os pacotes dentro da pasta packages .

Dentro do package.json raiz, atualize o conteúdo do arquivo com a seguinte linha: "workspaces": ["packages/*"]

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": {} }

6. Adicione um script para executar os dois pacotes

Último passo! Precisamos ter uma maneira de executar os dois pacotes — o cliente React e o cliente Express — simultaneamente. Para este exemplo, usaremos concurrently . Este pacote nos permite executar vários comandos em paralelo.

Adicione concurrently ao pacote raiz.json :

 $ yarn add -W concurrently

Adicione três novos scripts dentro do package.json do espaço de trabalho raiz. Dois scripts inicializam os clientes React e Express independentemente; o outro usa concurrently para executar os dois scripts em paralelo. Veja este código para referência.

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": { "client": "yarn workspace client start", "server": "yarn workspace server start", "start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" } }

Nota : Não precisaremos escrever nossos scripts de start nos pacotes “server” e “client” porque as ferramentas que usamos para gerar esses pacotes ( create-react-app e express-generator ) já adicionam esses scripts para nós. Então estamos prontos para ir!

Por fim, certifique-se de atualizar o script de inicialização do Express para executar o servidor Express na porta 4000. Caso contrário, o cliente e o servidor tentarão usar a mesma porta (3000).

Vá para packages/server/bin/www e altere a porta padrão na linha 15.

 var port = normalizePort(process.env.PORT || '4000');

Agora estamos prontos para executar nossos pacotes!

 $ yarn start

Para onde ir a partir daqui

Vamos recapitular o que cobrimos. Primeiro, aprendemos sobre os espaços de trabalho do Yarn e por que é uma ótima ferramenta para criar um projeto monorepo. Em seguida, criamos nosso primeiro projeto monorepo JavaScript usando o Yarn e dividimos a lógica do nosso aplicativo em vários pacotes: cliente e servidor. Além disso, criamos nossos primeiros scripts npm básicos e adicionamos as dependências necessárias para cada aplicativo.

A partir deste ponto, sugiro que você revise os projetos de código aberto em detalhes para ver como eles usam os espaços de trabalho do Yarn para dividir a lógica do projeto em vários pacotes. Reagir é bom.

Além disso, se você quiser ver um site de produção usando essa abordagem para separar aplicativos back-end e front-end em pacotes independentes, verifique a fonte do meu site, que também inclui um administrador de blog. Quando migrei a base de código para usar os espaços de trabalho do Yarn, criei uma solicitação pull com Kyle Wetch.

Além disso, configurei a infraestrutura para um projeto de hackathon que usa espaços de trabalho React, webpack, Node.js e Yarn, e você pode conferir o código-fonte aqui.

Finalmente, seria muito interessante para você aprender a publicar seus pacotes independentes para se familiarizar com o ciclo de vida do desenvolvimento. Existem alguns tutoriais interessantes para verificar: yarn publish ou npm publish.

Para quaisquer comentários ou perguntas, não hesite em entrar em contato comigo no Twitter. Além disso, nos próximos meses, publicarei mais conteúdo sobre isso no meu blog, para que você possa se inscrever lá também. Boa codificação!