ReactPress : une approche Monorepo avec pnpm pour un développement efficace

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

ReactPress : une approche Monorepo avec pnpm pour un développement efficace

Dans le domaine du développement Web moderne, la gestion des dépendances et de la structure du projet est cruciale pour maintenir une base de code évolutive et maintenable. ReactPress, une plateforme de publication open source construite avec React et Node.js, adopte une approche monorepo utilisant pnpm pour rationaliser ce processus. Voyons comment ReactPress exploite les capacités monorepo de pnpm pour améliorer l'efficacité du développement.

Qu’est-ce qu’un Monorepo ?

Un monorepo (dépôt monolithique) est une pratique de développement logiciel dans laquelle plusieurs projets ou modules sont gérés au sein d'un seul référentiel. Cette approche simplifie la gestion des dépendances, favorise la réutilisation du code et améliore la maintenabilité du projet. ReactPress adopte une stratégie monorepo, principalement parce qu'elle permet une gestion efficace des dépendances entre plusieurs packages.

Introduction à NPPM

pnpm est un gestionnaire de packages npm hautes performances qui utilise des liens physiques et des liens symboliques pour éviter la copie inutile de fichiers. Cela réduit considérablement le temps d’installation et l’utilisation de l’espace disque. De plus, pnpm prend en charge les espaces de travail, ce qui rend la gestion de plusieurs packages incroyablement simple et efficace.

Implémentation de ReactPress Monorepo

ReactPress organise l'ensemble de son projet comme un seul référentiel Git. À l'intérieur du référentiel, il existe plusieurs sous-répertoires, chacun représentant un package npm indépendant qui peut être développé, testé et publié séparément.

Structure du projet

La structure du projet ReactPress ressemble à ceci :

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

• Le répertoire client/ contient le code de l'application frontend React.
• Le répertoire server/ contient le code du serveur backend Node.js.
• Le répertoire config/ contient les fichiers de configuration et les scripts.
• Le fichier .npmrc est utilisé pour définir les configurations globales pour npm/pnpm.
• Le fichier pnpm-workspace.yaml spécifie l'emplacement des sous-packages de l'espace de travail.
• Le fichier package.json au niveau racine définit généralement les scripts globaux, les dépendances et les devDependencies.

Configuration de l'espace de travail pnpm

Dans le répertoire racine de ReactPress, le fichier pnpm-workspace.yaml précise la disposition de l'espace de travail :

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'

Cela indique que les répertoires client et serveur sont traités comme des sous-packages d'espace de travail.

Gestion des dépendances

Dans un monorepo, les sous-packages peuvent dépendre les uns des autres. Par exemple, le sous-package client peut dépendre des API fournies par le sous-package serveur. Dans pnpm, vous pouvez ajouter directement des dépendances dans le fichier package.json du sous-package, comme indiqué ci-dessous :

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

Notez que dans l'exemple ci-dessus, le sous-package client ne dépend pas directement du sous-package serveur car l'application frontend communique généralement avec le serveur backend via des requêtes HTTP. Cependant, si l'application frontend doit invoquer directement certains modules ou fonctions utilitaires fournis par le backend (ce qui est rare), vous pouvez ajouter une dépendance sur le serveur dans le fichier package.json du client.

Scripts et construction

Dans le fichier racine package.json de ReactPress, vous pouvez définir des scripts globaux pour créer, tester ou publier l'intégralité du projet. Par exemple :

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'

Ici, nous utilisons le package concurrently pour démarrer simultanément les serveurs de développement pour le client et le serveur. Le pnpm -w La commande exécute des scripts dans le sous-package d'espace de travail spécifié.

Exemple de code

Vous trouverez ci-dessous un exemple de code simple montrant comment organiser et exécuter des sous-packages dans le monorepo ReactPress.

En supposant que nous ayons configuré une application frontale React et un serveur backend Express dans les sous-packages client et serveur, respectivement. Maintenant, nous pouvons utiliser les commandes suivantes pour créer et démarrer l'intégralité du projet :

// 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...
  }
}

Cette commande démarrera simultanément les serveurs de développement pour les sous-packages client et serveur. Vous pouvez également exécuter les commandes suivantes pour démarrer le client ou le serveur séparément :

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

Conclusion

L'approche monorepo de ReactPress avec pnpm apporte une commodité considérable à la gestion des dépendances et à la structure du projet. En organisant l'application frontale React et le serveur backend Node.js dans le même référentiel, ReactPress peut facilement partager du code, de la configuration et des outils entre différents sous-packages, tout en simplifiant la gestion des dépendances et le processus de construction. Si vous développez un projet séparé frontend-backend à grande échelle et que vous souhaitez mieux gérer vos dépendances et la structure de votre code, l'approche monorepo de ReactPress est certainement un exemple intéressant à suivre.

N'hésitez pas à explorer le référentiel ReactPress sur GitHub et à voir comment il exploite les capacités monorepo de pnpm pour améliorer l'efficacité du développement. Bon codage ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!