Saiba como configurar uma Gatsby Tema do Projeto com Lerna: este guia vai ajudar você a entender o que é um mono-repo e como gerenciá-lo com Lerna usando NPM em vez de Fios de espaços de trabalho.

Index

  • What is Lerna and why it’s worth a try?
  • Configuração de Lerna com a NGP, a partir da shell
  • Andaime pastas e arquivos com a shell
  • Usando Lerna
    • Escolha a sua abordagem
  • Orquestrar tudo com Lerna bootstrap
  • Executar comandos e scripts
  • Assistente de Actualização

o Que é Lerna, e por que vale a pena tentar?

comecei a seguir o curso de autoria do tema Gatsby de Jason Lengstorf (@jlengstorf) e logo percebi que eu não sei nada sobre ‘espaços de trabalho de fios’. É uma maneira bonita de gerir o que se chama mono-repo.: um repositório que tem mais de um projeto dentro e pode compartilhar dependências.

por doppelmutzi de doppelmutzi.github.io:

tais projetos são chamados de espaços de trabalho ou pacotes. Em contraste, usando múltiplos repositórios com cada repositório abrigando apenas um projeto é chamado de uma abordagem multi-Repo.

uma coisa que me surpreendeu com a abordagem mono-repo foi que os meus pacotes/espaços de trabalho podem partilhar localmente as mesmas dependências node_modules. Isto poupa-me tempo e espaço físico.Lerna e os espaços de trabalho do fio nos dão a capacidade de construir bibliotecas e aplicativos em um único repo, sem nos forçar a Publicar para npm ou outros registros. A beleza por trás dessas tecnologias é que eles podem encontrar dependências de pacotes analisando pacote.ficheiros json localizados na pasta raiz de cada projecto. Assim, essas ferramentas tornam obsoleto para criar manualmente ligações simbólicas ou usar o link npm de “baixo nível” diretamente.

agora, mesmo se você já está usando yarn workspaces eu acho que Lerna vale a tentativa porque ele fornece uma série de vantagens. Além disso você poderia usar Lerna com espaços de trabalho de fios:

com um comando lerna você pode iterar através de todos ou pacotes particulares, executando uma série de operações (tais como linting, testing e building) em cada pacote. Assim, complementa os espaços de trabalho de fios que assume o processo de gestão de dependência.

então finalmente eu decidi aprender Lerna-Desculpe para o twister língua-mas eu não queria mudar para o fio (uma vez que eu estou apenas confortável com npm). Foi assim que consegui que funcionasse.:

Configuração de Lerna com a NGP, a partir da shell

Crie um diretório para o seu projeto e enter sobre ele com este comando:

mkdir try-lernacd try-lerna

Você pode instalar Lerna globalmente (npm i -g lerna) ou usá-lo com npx.

  • Init lerna

    npx lerna init --independent

Isto irá:

  • init um repositório git
  • criar uma package.json
  • criar uma lerna.json
  • criar uma packages pasta (aqui você pode colocar seus espaços de trabalho).

pacotes é como lerna chama espaços de trabalho.

você pode organizar os pacotes como quiser, se preferir você pode colocar todos os pacotes na pasta de raiz e, em seguida, mudar o array, a fim de corresponder (como uma abordagem de “espaços de trabalho de fios”).

My lerna.json arquivo tem stream: true (para ver gatsby saída quando executado desenvolver com lerna) e hoist: true (a fim de talha node_modules também com o comando lerna add; eu vou explicar este último recurso para a frente):

{ "packages":, "version":"independent", "stream":true, "command":{ "bootstrap":{ "hoist":true } }}

Você pode adicionar manualmente ou usar este comando simples da shell:

echo "{\r\t\"packages\":,\r\t\"version\":\"independent\",\r\t\"stream\":true,\r\t\"command\":{\r\t\t\"bootstrap\":{\r\t\t\t\"hoist\":true\r\t\t}\r\t}\r}" > lerna.json

pastas e arquivos de andaimes com shell

esta seção pode ser feita manualmente seguindo a primeira lição do curso de Jason Lengstorf ligado na introdução.Apenas recolho todas as passagens básicas, a fim de realizá-las com poucos comandos da shell.
No caso de você querer usar a minha abordagem lembre-se de substituir “NOME” com o nome do seu tema e, em seguida, basta copiar e colar este comandos:

mkdir -p packages/{gatsby-theme-NAME,site}
touch packages/{gatsby-theme-NAME,site}/{index.js,package.json}
echo "//loop" >> packages/{gatsby-theme-NAME,site}/index.js

conteúdo Inicial do pacote.json na pasta do site:

echo "{\r\t\"private\":true,\r\t\"name\":\"site\",\r\t\"version\":\"1.0.0\",\r\t\"license\":\"MIT\",\r\t\"scripts\":{\r\t\t\"builds\":\"gatsby build\",\r\t\t\"develop\":\"gatsby develop\",\r\t\t\"clean\":\"gaysby clean\"\r\t}\r}" >> packages/site/package.json

pacote.json na pasta do tema (substitua o NOME de novo e também inserir YOUR_NPM_USER):

echo "{\r\t\"name\": \"@YOUR_NPM_USER/gatsby-theme-NAME\",\r\t\"version\": \"1.0.1\",\r\t\"license\": \"MIT\",\r\t\"main\": \"index.js\",\r\t\"scripts\": {\r\t\t\"builds\": \"gatsby build\",\r\t\t\"develop\": \"gatsby develop\",\r\t\t\"clean\": \"gaysby clean\"\r\t}\r}" >> packages/gatsby-theme-NAME/package.json

Aqui está o resultado:

├── packages│ ├── site│ └── gatsby-theme-NAME├── .gitignore├── package.json└── lerna.json

PS: aconselho você a criar um .gitignore e adicionar node_modules imediatamente:

echo "node_modules" > .gitignore

Usando Lerna

Um problema com Lerna é que você não pode instalar várias dependências por Pacote, com um único comando (como você faz com yarn workspace name_workspace add package1 package2 etc). Você precisa fazer isso um a um, assim (se você não instalou globalmente você terá que preceder cada comando com npx):

lerna add gatsby --scope site 
lerna add react --scope site
lerna add react-dom --scope site

Aqui --scope site é usado para dizer Lerna para instalar apenas o Pacote “site”.

no Entanto, você pode instalar uma dependência, digamos gatsby, para cada Pacote, com apenas um comando:

lerna add gatsby

Este comando irá:

  • Instalar Gatsby para cada Pacote (nesse caso, portanto, para o Site e também para o Pacote do Tema).
  • se tiver permitido hoist no lerna.json irá criar uma pasta node_ modules na sua raiz (ver ‘Lerna Bootstrap forward’):

escolha a sua abordagem

se gostar desta abordagem pode continuar a instalar todas as dependências comuns (react, react-dom) nos pacotes. Se você precisar instalar algumas dependências apenas para um Pacote usar --scope name_of_the_package (lembre-se que é o nome especificado no Pacote.json não é o nome da pasta).

Poderá também usar o npm instalando todas as dependências que desejar no respectivo pacote. Mas lembre-se que esta abordagem irá instalar uma dependências node_ modules para cada pasta respectiva. Isto pode ser limpo e depois içado. Embora esta opção seja válida, levará mais tempo.

Qualquer opção que você escolher, lembre-se de adicionar/link do Tema local como um Pacote de dependência para o Pacote de Site (use o nome que você definir no package.json):

lerna add @YOUR_NPM_USER/gatsby-theme-NAME --scope=site

Orquestrar tudo com Lerna bootstrap

No final, você pode fazer com segurança: 

lerna bootstrap

Este comando é muito útil, especialmente se você já tem o seu pacote.json preencheu com suas respectivas dependências.

com opção hoist: true (em lerna.json) irá colocar uma pasta partilhada node_modules localizada na raiz, então irá ligar as dependências locais nas respectivas package.json.

I really like –hoist feature it’s a process that avoid duplicated dependencies on the node_ modules, so it saves physical space and installation time.Se, por qualquer razão, quiser limpar alguma coisa primeiro, pode fazer:

lerna clean && lerna link && lerna bootstrap

executar comandos e programas

para executar programas (colocados no package.json) terá de indicar (ou não) o pacote de destino:

lerna run develop --scope Package_name

Lerna também permite que você execute quaisquer comandos da raiz para cada pacote (use dash). Por exemplo:

lerna exec -- rm -rf node_modules

isto irá remover os módulos do nó em cada pasta de pacotes.

Assistente de Actualização

No futuro, quando você precisará atualizar seus pacotes você pode usar o update-assistente:

npm install --save-dev lerna-update-wizard

em seguida, você precisará executar apenas este comando e o assistente irá ajudá-lo: 

lernaupdate