Scopri come impostare un progetto a tema Gatsby con Lerna: questa guida ti aiuterà a capire cos’è un mono-repo e come gestirlo con Lerna usando NPM invece delle aree di lavoro di Yarn.

Index

  • Cos’è Lerna e perché vale la pena provare?
  • Impostazione di Lerna con NPM dalla shell
  • Ponteggi di cartelle e file con shell
  • Utilizzo di Lerna
    • Scegli il tuo approccio
  • a Orchestrare il tutto con Lerna bootstrap
  • Esegui i comandi e script
  • Update

che Cosa è Lerna e perché vale la pena provare?

Ho iniziato a seguire il corso di Authoring tema Gatsby da Jason Lengstorf (@jlengstorf) e ben presto si rese conto che non so nulla di ‘Spazi di lavoro filato’. È un bel modo per gestire quello che viene chiamato un mono-repo: un repository che ha più di un progetto all’interno e potrebbe condividere le dipendenze.

Di doppelmutzi da doppelmutzi.github.io:

Tali progetti sono chiamati aree di lavoro o pacchetti. Al contrario, l’utilizzo di più repository con ciascun repository che ospita solo un progetto è chiamato approccio Multi-Repo.

Una cosa che mi ha stupito con l’approccio mono-repo è che i miei pacchetti/aree di lavoro possono condividere localmente le stesse dipendenze node_modules. Questo mi fa risparmiare tempo e spazio fisico.

lerna e yarn workspaces ci danno la possibilità di creare librerie e app in un unico repository senza costringerci a pubblicare su npm o altri registri. La bellezza dietro queste tecnologie è che possono trovare le dipendenze dei pacchetti analizzando il pacchetto.file json situati nella cartella principale di ogni progetto. Pertanto, questi strumenti rendono obsoleto creare manualmente collegamenti simbolici o utilizzare direttamente il collegamento npm “di basso livello”.

Ora, anche se stai già usando yarn workspaces Penso che Lerna valga la pena provare perché fornisce una serie di vantaggi. Inoltre potresti usare Lerna con le aree di lavoro del filato:

con un comando lerna puoi scorrere tutti o particolari pacchetti, eseguendo una serie di operazioni (come linting, testing e building) su ciascun pacchetto. In tal modo, complimenta le aree di lavoro di yarn che prendono il sopravvento sul processo di gestione delle dipendenze.

Così alla fine ho deciso di imparare Lerna – scusa per lo scioglilingua – ma non volevo passare al filato (dato che mi sento a mio agio con npm). Ecco come sono riuscito a farlo funzionare:

Impostazione di Lerna con NPM dalla shell

Crea una directory per il tuo progetto e inseriscila con questo comando:

mkdir try-lernacd try-lerna

Puoi installare Lerna globalmente (npm i -g lerna) o usarlo con npx.

  • Init lerna

    npx lerna init --independent

Questo sarà:

  • init un repository git
  • crea un package.json
  • crea un lerna.json
  • crea una cartella packages (qui puoi posizionare le tue aree di lavoro).

Packages è come lerna chiama workspaces.

Puoi organizzare i pacchetti come vuoi, se preferisci puoi mettere tutti i pacchetti nella cartella principale e quindi cambiare l’array in modo che corrisponda (come un approccio “yarn workspaces”).

La mia lerna.il file json ha stream: true(per vedere l’output di gatsby quando si esegue lo sviluppo con lerna) e hoist: true (per issare node_modules anche con il comando lerna add; Spiegherò quest’ultima funzione in avanti):

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

È possibile aggiungere questo manualmente o utilizzare questo semplice comando 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 

Scaffolding folders and files with shell

Questa sezione può essere eseguita a mano seguendo la prima lezione del corso di Jason Lengstorf collegata nell’introduzione.
Raccolgo solo tutti i passaggi di base per realizzarli con pochi comandi dalla shell.
Nel caso in cui si desideri utilizzare il mio approccio, ricordarsi di sostituire “NOME” con il nome del tema e quindi copiare e incollare questi comandi:

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

Contenuto iniziale per il pacchetto.json nella cartella del sito:

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 

pacchetto.json sulla cartella del tema (sostituire di nuovo il NOME e anche inserire 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 

Ecco il risultato:

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

PS: ti consiglio di creare un .gitignore e aggiunge node_modules subito:

echo "node_modules" > .gitignore

Utilizzo di Lerna

Un problema con Lerna è che non è possibile installare più di dipendenze per Pacchetto con un singolo comando (come si fa con yarn workspace name_workspace add package1 package2 etc). Devi farlo uno per uno, in questo modo (se non l’hai installato globalmente dovrai precedere ogni comando con npx):

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

Qui --scope site è usato per dire a Lerna di installare solo nel pacchetto “sito”.

Tuttavia, è possibile installare una dipendenza, diciamo gatsby, per ogni Pacchetto con un solo comando:

lerna add gatsby

Questo comando:

  • Installare Gatsby per ogni Pacchetto (quindi in questo caso per il Sito e anche per il Pacchetto di temi).
  • Se hai abilitato hoist su lerna.json creerà una cartella node_modules nella tua root (vedi ‘Lerna Bootstrap forward’):

Scegli il tuo approccio

Se ti piace questo approccio puoi continuare a installare tutte le dipendenze comuni (react, react-dom) sui Pacchetti. Se hai bisogno di installare alcune dipendenze solo per un pacchetto usa --scope name_of_the_package (ricorda che è il nome specificato sul pacchetto.json non il nome della cartella).

Puoi anche usare npm installando ogni dipendenza che vuoi nel rispettivo pacchetto. Ma ricorda che questo approccio installerà dipendenze node_modules per ogni rispettiva cartella. Questo potrebbe essere pulito e poi issato in seguito. Anche se questa opzione è valida, ci vorrà più tempo.

Qualunque sia l’opzione scelta ricordarsi di aggiungere/link locale a Tema Pacchetto come un dipendenza per il Pacchetto del Sito (utilizzare il nome che hai impostato sul package.json):

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

a Orchestrare il tutto con Lerna bootstrap

alla fine si può tranquillamente fare:

lerna bootstrap 

Questo comando è molto utile, specialmente se avete già il vostro pacchetto.json riempito con le rispettive dipendenze.

Con l’opzione hoist: true (su lerna.json) posizionerà una cartella node_modules condivisa situata nella radice, quindi collegherà le dipendenze locali nelle rispettive package.json.

Mi piace molto feature hoist feature è un processo che evita le dipendenze duplicate sui node_modules, quindi consente di risparmiare spazio fisico e tempo di installazione.

Se per qualsiasi motivo vuoi pulire prima qualcosa che potresti fare:

lerna clean && lerna link && lerna bootstrap 

Esegui comandi e script

Per eseguire gli script (posizionati su package.json) è necessario specificare (o meno) il pacchetto di destinazione:

lerna run develop --scope Package_name

Lerna ti consente anche di eseguire qualsiasi comando dalla radice a ogni pacchetto (usa dash). Ad esempio:

lerna exec -- rm -rf node_modules 

Questo rimuoverà i moduli nodo in ogni cartella del pacchetto.

Update Wizard

In futuro, quando sarà necessario aggiornare i pacchetti, è possibile utilizzare update-wizard:

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

quindi dovrai eseguire solo questo comando e la procedura guidata ti aiuterà:

lernaupdate