ReactPress: Ein Monorepo-Ansatz mit pnpm für effiziente Entwicklung

ReactPress GitHub: https://github.com/fecommunity/reactpress

ReactPress: Ein Monorepo-Ansatz mit pnpm für effiziente Entwicklung

Im Bereich der modernen Webentwicklung ist die Verwaltung von Abhängigkeiten und Projektstrukturen von entscheidender Bedeutung für die Aufrechterhaltung einer skalierbaren und wartbaren Codebasis. ReactPress, eine Open-Source-Publishing-Plattform, die auf React und Node.js basiert, verfolgt einen Monorepo-Ansatz und nutzt pnpm, um diesen Prozess zu optimieren. Sehen wir uns an, wie ReactPress die Monorepo-Funktionen von pnpm nutzt, um die Entwicklungseffizienz zu steigern.

Was ist ein Monorepo?

Ein Monorepo (monolithisches Repository) ist eine Softwareentwicklungspraxis, bei der mehrere Projekte oder Module in einem einzigen Repository verwaltet werden. Dieser Ansatz vereinfacht das Abhängigkeitsmanagement, fördert die Wiederverwendung von Code und verbessert die Wartbarkeit von Projekten. ReactPress verfolgt eine Monorepo-Strategie, vor allem weil sie eine effiziente Handhabung von Abhängigkeiten zwischen mehreren Paketen ermöglicht.

Einführung in pnpm

pnpm ist ein leistungsstarker NPM-Paketmanager, der Hardlinks und symbolische Links verwendet, um unnötiges Kopieren von Dateien zu vermeiden. Dies reduziert die Installationszeit und den Speicherplatzverbrauch erheblich. Darüber hinaus unterstützt pnpm Arbeitsbereiche, was die Verwaltung mehrerer Pakete unglaublich einfach und effizient macht.

ReactPress Monorepo-Implementierung

ReactPress organisiert sein gesamtes Projekt als ein einziges Git-Repository. Im Repository gibt es mehrere Unterverzeichnisse, die jeweils ein unabhängiges npm-Paket darstellen, das separat entwickelt, getestet und veröffentlicht werden kann.

Projektstruktur

Die ReactPress-Projektstruktur sieht in etwa so aus:

reactpress/
├── client/        # Frontend React application
├── server/        # Backend Node.js server
├── config/        # Configuration files and scripts
├── .npmrc
├── pnpm-workspace.yaml
├── package.json
└── ...

• Das Verzeichnis client/ enthält den Frontend-React-Anwendungscode.
• Das Verzeichnis server/ enthält den Backend-Node.js-Servercode.
• Das Verzeichnis config/ enthält Konfigurationsdateien und Skripte.
• Die .npmrc-Datei wird verwendet, um globale Konfigurationen für npm/pnpm festzulegen.
• Die Datei pnpm-workspace.yaml gibt den Speicherort der Workspace-Unterpakete an.
• Die Datei package.json auf Stammebene definiert normalerweise globale Skripte, Abhängigkeiten und DevDependencies.

Konfigurieren des pnpm-Arbeitsbereichs

Im ReactPress-Stammverzeichnis gibt die Datei pnpm-workspace.yaml das Arbeitsbereichslayout an:

packages:
  - 'client'
  - 'server'
  # If there are packages in the config directory that need to be included, they can be listed here too
  # - 'config/some-package'

Dies zeigt an, dass die Client- und Serververzeichnisse als Workspace-Unterpakete behandelt werden.

Abhängigkeitsmanagement

In einem Monorepo können Unterpakete voneinander abhängen. Beispielsweise könnte das Client-Unterpaket von APIs abhängen, die vom Server-Unterpaket bereitgestellt werden. In pnpm können Sie Abhängigkeiten direkt in der package.json-Datei des Unterpakets hinzufügen, wie unten gezeigt:

reactpress/
├── client/        # Frontend React application
├── server/        # Backend Node.js server
├── config/        # Configuration files and scripts
├── .npmrc
├── pnpm-workspace.yaml
├── package.json
└── ...

Beachten Sie, dass im obigen Beispiel das Client-Unterpaket nicht direkt vom Server-Unterpaket abhängt, da die Frontend-Anwendung normalerweise über HTTP-Anfragen mit dem Backend-Server kommuniziert. Wenn die Frontend-Anwendung jedoch bestimmte vom Backend bereitgestellte Module oder Dienstprogrammfunktionen direkt aufrufen muss (was ungewöhnlich ist), können Sie in der Datei package.json des Clients eine Abhängigkeit vom Server hinzufügen.

Skripte und Gebäude

In der Root-Datei package.json von ReactPress können Sie globale Skripte zum Erstellen, Testen oder Veröffentlichen des gesamten Projekts definieren. Zum Beispiel:

packages:
  - 'client'
  - 'server'
  # If there are packages in the config directory that need to be included, they can be listed here too
  # - 'config/some-package'

Hier verwenden wir das Concurrently-Paket, um die Entwicklungsserver für den Client und den Server gleichzeitig zu starten. Das pnpm -w Der Befehl führt Skripte im angegebenen Arbeitsbereich-Unterpaket aus.

Codebeispiel

Unten finden Sie ein einfaches Codebeispiel, das zeigt, wie Unterpakete im ReactPress-Monorepo organisiert und ausgeführt werden.

Angenommen, wir haben in den Client- bzw. Server-Unterpaketen eine React-Frontend-Anwendung und einen Express-Backend-Server eingerichtet. Jetzt können wir die folgenden Befehle verwenden, um das gesamte Projekt zu erstellen und zu starten:

// In client/package.json
{
  "name": "@reactpress/client",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    // Normally, the client communicates with the server via HTTP requests, so it doesn't directly depend on the server package
    // But if the client needs to directly call modules or utilities provided by the server, you can add a dependency like this
    // "@reactpress/server": "workspace:*"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    // Other scripts...
  }
}

// In server/package.json
{
  "name": "@reactpress/server",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.17.1",
    "mysql2": "^2.3.3",
    // Other dependencies...
  },
  "scripts": {
    "start": "node index.js",
    // Other scripts...
  }
}

Dieser Befehl startet gleichzeitig die Entwicklungsserver für die Client- und Server-Unterpakete. Sie können auch die folgenden Befehle ausführen, um den Client oder Server separat zu starten:

{
  "name": "reactpress",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start:client": "pnpm -w client start",
    "start:server": "pnpm -w server start",
    "build:client": "pnpm -w client build",
    // Define a script to start both the client and server simultaneously
    "start": "concurrently \"pnpm -w client start\" \"pnpm -w server start\""
  },
  "devDependencies": {
    "concurrently": "^6.2.1",
    // Other development dependencies...
  },
  "workspaces": [
    "client",
    "server"
    // If there are packages in the config directory that need to be included, they can be listed here too
    // "config/some-package"
  ]
}

Abschluss

Der Monorepo-Ansatz von ReactPress mit pnpm bringt erheblichen Komfort für das Abhängigkeitsmanagement und die Projektstruktur. Durch die Organisation der Frontend-React-Anwendung und des Backend-Node.js-Servers im selben Repository kann ReactPress problemlos Code, Konfiguration und Tools zwischen verschiedenen Unterpaketen teilen und gleichzeitig die Abhängigkeitsverwaltung und den Build-Prozess vereinfachen. Wenn Sie ein großes Frontend-Backend-getrenntes Projekt entwickeln und Ihre Abhängigkeiten und Codestruktur besser verwalten möchten, ist der Monorepo-Ansatz von ReactPress definitiv ein lohnendes Beispiel.

Erkunden Sie gerne das ReactPress-Repository auf GitHub und sehen Sie, wie es die Monorepo-Funktionen von pnpm nutzt, um die Entwicklungseffizienz zu steigern. Viel Spaß beim Codieren! ?

Das obige ist der detaillierte Inhalt vonReactPress: Ein Monorepo-Ansatz mit pnpm für effiziente Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!