Erfahren Sie, wie Sie ein Gatsby-Theme-Projekt mit Lerna einrichten: Dieser Leitfaden hilft Ihnen zu verstehen, was ein Mono-Repo ist und wie Sie es mit Lerna mit NPM anstelle von Yarn Workspaces verwalten.

Index

  • Was ist Lerna und warum ist es einen Versuch wert?
  • Lerna mit NPM aus der Shell setzen
  • Scaffolding Ordner und Dateien mit Shell
  • Lerna verwenden
    • Wählen Sie Ihren Ansatz
  • Orchestrieren Sie alles mit Lerna Bootstrap
  • Ausführen von Befehlen und Skripten
  • Update-Assistent

Was ist Lerna und warum ist es einen Versuch wert?

Ich fing an, dem Gatsby Theme Authoring Kurs von Jason Lengstorf (@jlengstorf) zu folgen und merkte bald, dass ich nichts über ‚Yarn Workspaces‘ weiß. Es ist eine hübsche Möglichkeit, ein sogenanntes Mono-Repo zu verwalten: ein Repository, das mehr als ein Projekt enthält und Abhängigkeiten gemeinsam nutzen kann.

Von doppelmutzi ab doppelmutzi.github.io:

Solche Projekte werden als Arbeitsbereiche oder Pakete bezeichnet. Im Gegensatz dazu wird die Verwendung mehrerer Repositorys mit jedem Repository, in dem nur ein Projekt untergebracht ist, als Multi-Repo-Ansatz bezeichnet.

Eine Sache, die mich mit dem Mono-Repo-Ansatz erstaunt hat, war, dass meine Pakete / Arbeitsbereiche lokal dieselben node_modules Abhängigkeiten gemeinsam nutzen können. Das spart mir Zeit und physischen Raum.

lerna und yarn Workspaces geben uns die Möglichkeit, Bibliotheken und Apps in einem einzigen Repo zu erstellen, ohne uns zu zwingen, in npm oder anderen Registern zu veröffentlichen. Das Schöne an diesen Technologien ist, dass sie Paketabhängigkeiten durch Analyse von Paketen finden können.json-Dateien, die sich im Stammordner jedes Projekts befinden. Dadurch machen es diese Tools überflüssig, Symlinks manuell zu erstellen oder „Low-Level“ -npm-Links direkt zu verwenden.

Nun, auch wenn Sie bereits yarn workspaces Ich denke, Lerna den Versuch wert, weil es eine Reihe von Vorteilen bietet. Außerdem könnten Sie Lerna mit Yarn Workspaces verwenden:

mit einem lerna-Befehl können Sie alle oder bestimmte Pakete durchlaufen und eine Reihe von Operationen (z. B. Linting, Testen und Erstellen) für jedes Paket ausführen. Dabei ergänzt es Yarn Workspaces, das den Abhängigkeitsmanagementprozess übernimmt.

Also entschied ich mich schließlich, Lerna zu lernen – sorry für den Zungenbrecher – aber ich wollte nicht zu Garn wechseln (da ich mich nur mit npm wohl fühle). So habe ich es geschafft, dass es funktioniert:

Lerna mit NPM aus der Shell setzen

Erstellen Sie ein Verzeichnis für Ihr Projekt und geben Sie es mit diesem Befehl ein:

mkdir try-lernacd try-lerna

Sie können Lerna global installieren (npm i -g lerna) oder mit npx verwenden.

  • Init lerna

    npx lerna init --independent

Dies wird:

  • init ein Git-Repository
  • Erstellen Sie einen package.json
  • Erstellen Sie einen lerna.json
  • Erstellen Sie einen packages Ordner (hier können Sie Ihre Arbeitsbereiche platzieren).

So nennt lerna Workspaces.

Sie können die Pakete nach Belieben anordnen, wenn Sie möchten, können Sie alle Pakete in den Stammordner legen und dann das Array entsprechend ändern (wie bei einem „Yarn Workspaces“ -Ansatz).

Meine lerna.json-Datei hat stream: true (um Gatsby-Ausgabe zu sehen, wenn Sie mit lerna entwickeln) und hoist: true (um node_modules auch mit dem Befehl lerna add zu hissen; Ich werde diese letzte Funktion weiter erläutern):

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

Sie können dies manuell hinzufügen oder diesen einfachen Shell-Befehl verwenden:

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 

Gerüstordner und Dateien mit Shell

Dieser Abschnitt kann nach der ersten Lektion aus Jason Lengstorfs Kurs, der in der Einleitung verlinkt ist, von Hand ausgeführt werden.
Ich sammle nur alle grundlegenden Passagen, um sie mit wenigen Befehlen aus der Shell zu erreichen.
Falls Sie meinen Ansatz verwenden möchten, denken Sie daran, „NAME“ durch den Namen Ihres Themas zu ersetzen und dann einfach diesen Befehl zu kopieren und einzufügen:

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

Anfangsinhalt für Paket.json im Site-Ordner:

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 

paket.klicken Sie auf das Ordnerthema (ersetzen Sie den NAMEN erneut und fügen Sie auch YOUR_NPM_USER ein):

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 

Hier ist das Ergebnis:

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

PS: Ich rate Ihnen, ein .gitignore zu erstellen und sofort node_modules hinzuzufügen:

echo "node_modules" > .gitignore

Verwenden von Lerna

Ein Problem mit Lerna besteht darin, dass Sie nicht mehrere Abhängigkeiten pro Paket mit einem einzigen Befehl installieren können (wie bei yarn workspace name_workspace add package1 package2 etc ). Sie müssen es nacheinander tun, wie folgt (wenn Sie es nicht global installiert haben, müssen Sie jedem Befehl npx voranstellen):

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

Hier wird --scope site verwendet, um Lerna anzuweisen, nur im Paket „site“ zu installieren.

Sie können jedoch eine Abhängigkeit, sagen wir gatsby, für jedes Paket mit nur einem Befehl installieren:

lerna add gatsby

Dieser Befehl wird:

  • Installieren Sie Gatsby für jedes Paket (also in diesem Fall für die Site und auch für das Theme-Paket).
  • Wenn Sie hoist auf der lerna aktiviert haben.json es wird ein node_modules Ordner in Ihrem Stammverzeichnis erstellt (siehe ‚Lerna Bootstrap forward‘):

Wählen Sie Ihren Ansatz

Wenn Ihnen dieser Ansatz gefällt, können Sie weiterhin alle gängigen Abhängigkeiten (react, react-dom) auf den Paketen installieren. Wenn Sie einige Abhängigkeiten nur für ein Paket installieren müssen, verwenden Sie --scope name_of_the_package (denken Sie daran, dass dies der im Paket angegebene Name ist.json nicht der Name des Ordners).

Sie können npm auch verwenden, indem Sie jede gewünschte Abhängigkeit im jeweiligen Paket installieren. Denken Sie jedoch daran, dass bei diesem Ansatz Abhängigkeiten von node_modules für jeden entsprechenden Ordner installiert werden. Dieser konnte sauber und anschließend gehisst werden. Obwohl diese Option gültig ist, dauert es länger.

Welche Option Sie auch wählen, denken Sie daran, das lokale Themenpaket als Abhängigkeit für das Site-Paket hinzuzufügen / zu verknüpfen (verwenden Sie den Namen, den Sie festgelegt haben package.json):

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

Orchestrieren Sie alles mit Lerna Bootstrap

Am Ende können Sie sicher tun:

lerna bootstrap 

Dieser Befehl ist sehr hilfreich, insbesondere wenn Sie Ihr Paket bereits haben.json mit ihren jeweiligen Abhängigkeiten gefüllt.

Mit der Option hoist: true (auf lerna.json) wird ein freigegebener Ordner node_modules im Stammverzeichnis abgelegt und dann lokale Abhängigkeiten in ihren jeweiligen package.json verknüpft.

Ich mag –hoist feature Es ist ein Prozess, der doppelte Abhängigkeiten von den node_modules vermeidet und so physischen Platz und Installationszeit spart.

Wenn Sie aus irgendeinem Grund zuerst etwas reinigen möchten, können Sie Folgendes tun:

lerna clean && lerna link && lerna bootstrap 

Ausführen von Befehlen und Skripten

Zum Ausführen von Skripten (platziert auf der package.json) müssen Sie angeben, (oder nicht) das Zielpaket:

lerna run develop --scope Package_name

Mit Lerna können Sie auch beliebige Befehle vom Stamm zu jedem Paket ausführen (verwenden Sie Dash). Zum Beispiel:

lerna exec -- rm -rf node_modules 

Dadurch werden Knotenmodule in jedem Paketordner entfernt.

Update-Assistent

Wenn Sie in Zukunft Ihre Pakete aktualisieren müssen, können Sie den Update-Assistenten verwenden:

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

dann müssen Sie nur diesen Befehl ausführen und der Assistent wird Ihnen helfen:

lernaupdate