Yarn Workspaces: Organisieren Sie die Codebasis Ihres Projekts wie ein Profi

Jedes Mal, wenn ich mit der Arbeit an einem neuen Projekt beginne, frage ich mich: „Sollte ich separate Git-Repositories für meinen Back-End-Server und meine Front-End-Clients verwenden? Wie organisiert man die Codebasis am besten?“

Ich hatte dieselbe Frage, nachdem ich ein paar Monate an meiner persönlichen Website gearbeitet hatte. Ich hatte ursprünglich den gesamten Code im selben Repository: Das Backend verwendete Node.js und das Frontend verwendete ES6 mit Pug. Ich habe diese Organisation der Einfachheit halber übernommen, da es einfach war, nach Funktionen und Klassen zu suchen, da sich beide Projekte im selben Repo befanden, und Refactoring erleichterte. Allerdings habe ich einige Nachteile gefunden:

• Keine unabhängigen Bereitstellungen.
  Beide Apps verwendeten dieselbe package.json , und es gab keine klare Trennung bei beiden Projekten.
• Unklare Grenzen.
  Da ich auf eine globale package.json angewiesen bin, hatte ich keinen Mechanismus, um bestimmte Versionen für das Backend und das Frontend festzulegen.
• Gemeinsam genutzte Dienstprogramme und Code ohne Versionierung.

Nach einiger Recherche stellte ich fest, dass Yarn-Arbeitsbereiche ein großartiges Werkzeug waren, um diese Nachteile zu lösen, und es war ein hilfreiches Werkzeug, um ein Monorepo-Projekt zu erstellen (mehr dazu später!).

In diesem Artikel teile ich eine Einführung in Yarn-Arbeitsbereiche. Wir werden gemeinsam ein Tutorial durchgehen, wie Sie Ihr erstes Projekt damit erstellen, und wir werden mit einer Zusammenfassung und den nächsten Schritten abschließen.

Was sind Garn-Arbeitsbereiche?

Yarn ist ein Paketmanager von den Leuten bei Facebook und hat eine großartige Funktion namens Yarn Workspaces. Mit Yarn-Arbeitsbereichen können Sie Ihre Projektcodebasis mithilfe eines monolithischen Repositorys (Monorepo) organisieren. Die Idee ist, dass ein einzelnes Repository mehrere Pakete enthalten würde. Pakete sind isoliert und könnten unabhängig vom größeren Projekt leben.

Als Alternative könnten wir alle diese Pakete in separaten Repositories platzieren. Leider beeinträchtigt dieser Ansatz die gemeinsame Nutzung, Effizienz und Entwicklererfahrung beim Entwickeln auf den Paketen und ihren abhängigen Projekten. Wenn wir in einem einzigen Repository arbeiten, können wir außerdem schneller vorankommen und spezifischere Tools erstellen, um Prozesse für den gesamten Entwicklungslebenszyklus zu verbessern.

Monorepo-Projekte wurden von großen Unternehmen wie Google oder Facebook weitgehend akzeptiert und sie haben bewiesen, dass Monorepo skalieren kann.

„

React ist ein gutes Beispiel für ein Open-Source-Projekt, das Monorepo ist. Außerdem verwendet React Yarn-Arbeitsbereiche, um diesen Zweck zu erreichen. Im nächsten Abschnitt erfahren Sie, wie Sie unser erstes Monorepo-Projekt mit Yarn erstellen.

Erstellen eines Monorepo-Projekts mit React And Express unter Verwendung von Yarn-Arbeitsbereichen in sechs Schritten

Bisher haben wir gelernt, was Yarn ist, was ein Monorepo ist und warum Yarn ein großartiges Werkzeug zum Erstellen eines Monorepos ist. Lassen Sie uns nun von Grund auf lernen, wie Sie ein neues Projekt mit Yarn-Arbeitsbereichen einrichten. Um mitzumachen, benötigen Sie eine Arbeitsumgebung mit einer aktuellen npm-Installation. Laden Sie den Quellcode herunter.

Voraussetzungen

Um dieses Tutorial vollständig abzuschließen, muss Yarn auf Ihrem Computer installiert sein. Wenn Sie Yarn noch nicht installiert haben, befolgen Sie bitte diese Anweisungen.

Dies sind die Schritte, die wir in diesem Tutorial befolgen werden:

1. Erstellen Sie Ihr Projekt und Ihren Root-Arbeitsbereich
2. Erstellen Sie ein React-Projekt und fügen Sie es der Workspace-Liste hinzu
3. Erstellen Sie ein Express-Projekt und fügen Sie es dem Arbeitsbereich hinzu
4. Installieren Sie alle Abhängigkeiten und sagen Sie Hallo zu Garn.lock
5. Verwenden eines Platzhalters (*) zum Importieren aller Ihrer Pakete
6. Fügen Sie ein Skript hinzu, um beide Pakete auszuführen

1. Erstellen Sie Ihr Projekt und Ihren Root-Arbeitsbereich

Erstellen Sie in Ihrem lokalen Maschinenterminal einen neuen Ordner mit dem Namen example-monorepo :

 $ mkdir example-monorepo

Erstellen Sie innerhalb des Ordners eine neue package.json mit unserem Root-Arbeitsbereich.

 $ cd example-monorepo $ touch package.json

Dieses Paket sollte privat sein, um zu verhindern, dass der Root-Arbeitsbereich versehentlich veröffentlicht wird. Fügen Sie Ihrer neuen package.json -Datei den folgenden Code hinzu, um das Paket privat zu machen:

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

2. Erstellen Sie ein React-Projekt und fügen Sie es der Workspace-Liste hinzu

In diesem Schritt erstellen wir ein neues React-Projekt und fügen es der Liste der Pakete im Root-Arbeitsbereich hinzu.

Lassen Sie uns zunächst einen Ordner namens Packages erstellen, in dem wir die verschiedenen Projekte hinzufügen, die wir im Tutorial erstellen werden:

 $ mkdir packages

Facebook hat einen Befehl, um neue React-Projekte zu erstellen: create-react-app . Wir verwenden es, um eine neue React-App mit allen erforderlichen Konfigurationen und Skripten zu erstellen. Wir erstellen dieses neue Projekt mit dem Namen „client“ im Paketordner , den wir in Schritt 1 erstellt haben.

 $ yarn create react-app packages/client

Sobald wir unser neues React-Projekt erstellt haben, müssen wir Yarn anweisen, dieses Projekt als Arbeitsbereich zu behandeln. Dazu müssen wir einfach „client“ (den Namen, den wir zuvor verwendet haben) in die Liste „workspaces“ im Stammpaket „ package.json “ einfügen. Stellen Sie sicher, dass Sie denselben Namen verwenden, den Sie beim Ausführen des Befehls create-react-app verwendet haben.

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

3. Erstellen Sie ein Express-Projekt und fügen Sie es dem Arbeitsbereich hinzu

Jetzt ist es an der Zeit, eine Back-End-App hinzuzufügen! Wir verwenden den express-generator , um ein Express-Skelett mit allen erforderlichen Konfigurationen und Skripten zu erstellen.

Stellen Sie sicher, dass Sie express-generator auf Ihrem Computer installiert haben. Sie können es mit Yarn mit dem folgenden Befehl installieren:

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

Mit express-generator erstellen wir eine neue Express-App mit dem Namen „server“ im Ordner „ packages “.

 $ express --view=pug packages/server

Fügen Sie schließlich das neue Paket „server“ zur Liste der Arbeitsbereiche in der Root-Datei „ package.json “ hinzu.

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

Hinweis : Dieses Tutorial wird mit nur zwei Paketen (Server und Client) vereinfacht. In einem Projekt haben Sie normalerweise so viele Pakete wie Sie benötigen, und die Open-Source-Community verwendet standardmäßig dieses Benennungsmuster: @your-project-name/package-name . Beispiel: Ich verwende @ferreiro/server auf meiner Website.

4. Installieren Sie alle Abhängigkeiten und sagen Sie Hallo zu Garn.lock

Nachdem wir unsere React-App sowie unseren Express-Server hinzugefügt haben, müssen wir alle Abhängigkeiten installieren. Yarn Workspaces vereinfacht diesen Prozess und wir müssen nicht mehr zu jeder einzelnen Anwendung gehen und ihre Abhängigkeiten manuell installieren. Stattdessen führen wir einen Befehl aus – yarn install – und Yarn erledigt die Magie, um alle Abhängigkeiten für jedes Paket zu installieren, zu optimieren und zwischenzuspeichern.

Führen Sie den folgenden Befehl aus:

 $ yarn install

Dieser Befehl generiert eine Garn.lock -Datei (ähnlich wie in diesem Beispiel). Es enthält alle Abhängigkeiten für Ihr Projekt sowie die Versionsnummern für jede Abhängigkeit. Yarn generiert diese Datei automatisch und Sie sollten sie nicht ändern.

5. Verwenden eines Platzhalters (*) zum Importieren aller Ihrer Pakete

Bisher mussten wir für jedes neue Paket, das wir hinzugefügt haben, auch die root- Datei „package.json“ aktualisieren, um das neue Paket in die workspaces workspaces:[] Liste aufzunehmen.

Wir können diesen manuellen Schritt vermeiden, indem wir einen Platzhalter (*) verwenden, der Yarn anweist, alle Pakete im Paketordner einzuschließen.

Aktualisieren Sie im Stammpaket package.json den Dateiinhalt mit der folgenden Zeile: "workspaces": ["packages/*"]

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

6. Fügen Sie ein Skript hinzu, um beide Pakete auszuführen

Letzter Schritt! Wir müssen eine Möglichkeit haben, beide Pakete – den React-Client und den Express-Client – ​​gleichzeitig auszuführen. Für dieses Beispiel verwenden wir concurrently . Mit diesem Paket können wir mehrere Befehle parallel ausführen.

Fügen Sie concurrently zur Root- package.json hinzu :

 $ yarn add -W concurrently

Fügen Sie drei neue Skripts innerhalb des Root-Arbeitsbereichs package.json hinzu . Zwei Skripte initialisieren die React- und Express-Clients unabhängig voneinander; der andere wird concurrently verwendet, um beide Skripte parallel auszuführen. Siehe diesen Code als Referenz.

 { "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\" } }

Hinweis : Wir müssen unsere Startskripte nicht in die Pakete „Server“ und „Client“ schreiben, start die Tools, mit denen wir diese Pakete generiert haben ( create-react-app und express-generator ), diese Skripte bereits für uns hinzufügen. Wir sind also startklar!

Stellen Sie schließlich sicher, dass Sie das Express-Startskript so aktualisieren, dass der Express-Server auf Port 4000 ausgeführt wird. Andernfalls versuchen Client und Server, denselben Port (3000) zu verwenden.

Gehen Sie zu packages/server/bin/www und ändern Sie den Standardport in Zeile 15.

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

Jetzt können wir unsere Pakete ausführen!

 $ yarn start

Wohin von hier aus

Fassen wir zusammen, was wir behandelt haben. Zuerst haben wir etwas über Yarn-Arbeitsbereiche gelernt und warum es ein großartiges Tool zum Erstellen eines Monorepo-Projekts ist. Dann haben wir unser erstes JavaScript-Monorepo-Projekt mit Yarn erstellt und die Logik unserer App in mehrere Pakete aufgeteilt: Client und Server. Außerdem haben wir unsere ersten grundlegenden npm-Skripte erstellt und die erforderlichen Abhängigkeiten für jede App hinzugefügt.

Von diesem Punkt an würde ich vorschlagen, dass Sie Open-Source-Projekte im Detail überprüfen, um zu sehen, wie sie Yarn-Arbeitsbereiche verwenden, um die Projektlogik in viele Pakete aufzuteilen. Reagieren ist gut.

Wenn Sie außerdem eine Produktionswebsite sehen möchten, die diesen Ansatz verwendet, um Back-End- und Front-End-Apps in unabhängige Pakete zu trennen, können Sie die Quelle meiner Website überprüfen, die auch einen Blog-Administrator enthält. Als ich die Codebasis migriert habe, um Yarn-Arbeitsbereiche zu verwenden, habe ich eine Pull-Anforderung mit Kyle Wetch erstellt.

Außerdem habe ich die Infrastruktur für ein Hackathon-Projekt eingerichtet, das React-, Webpack-, Node.js- und Yarn-Workspaces verwendet, und Sie können den Quellcode hier überprüfen.

Schließlich wäre es für Sie wirklich interessant zu erfahren, wie Sie Ihre unabhängigen Pakete veröffentlichen, um sich mit dem Entwicklungslebenszyklus vertraut zu machen. Es gibt ein paar Tutorials, die interessant zu überprüfen sind: Yarn Publish oder NPM Publish.

Bei Kommentaren oder Fragen zögern Sie nicht, mich auf Twitter zu kontaktieren. Außerdem werde ich in den folgenden Monaten weitere Inhalte dazu in meinem Blog veröffentlichen, damit Sie sich auch dort anmelden können. Viel Spaß beim Codieren!