Maison >interface Web >js tutoriel >Construisez et exécutez votre projet dans Monorepo avec PNPM

Construisez et exécutez votre projet dans Monorepo avec PNPM

Patricia Arquette
Patricia Arquetteoriginal
2025-01-19 16:33:12314parcourir

Build and run your project in Monorepo with PNPM

Organisation du code projet : Polyrepo vs Monorepo

Il existe deux manières principales d'organiser le code d'un projet :

  1. Polyrepo : Diffusez le code du projet dans différents référentiels. Il s'agit de la pratique standard actuelle. Plusieurs équipes disposent de leurs propres entrepôts, construisent des produits et des pipelines et sont autonomes.
  2. Monorepo : Centralise tout le code du projet dans un seul référentiel. Les projets sont divisés en applications et packages pour faciliter la réutilisation du code et partager des fonctionnalités standard, ce qui permet d'unifier les versions de packages tiers, de créer de manière récursive le code source pour les dépendances et d'utiliser les mêmes outils pour les pipelines CI/CD.

Monorepo est utilisé par de nombreuses grandes entreprises technologiques, telles que Yandex. Monorepo aide à partager des idées et des bonnes pratiques entre les équipes et les unités commerciales. Pour plus d'informations sur Monorepo et les outils associés, veuillez visiter https://www.php.cn/link/b01ccf4f29b57b0b1bdb9407050db28d. Cet article se concentrera sur une solution simple pour créer Monorepo à l'aide de PNPM.

PNPM utilise des espaces de travail pour intégrer plusieurs projets dans un seul référentiel.

Configuration de l'environnement

Tout d'abord, créez un dossier vide en tant que nouveau projet Monorepo. Initialisez PNPM dans l'entrepôt :

<code class="language-bash">pnpm init</code>

Ensuite, créez un fichier pnpm-workspace.yaml décrivant le dossier du package :

<code class="language-yaml">// pnpm-workspace.yaml

packages:
  - 'packages/**'
  - 'apps/**'</code>
Le dossier

/packages contient les bibliothèques partagées et le dossier /apps contient les applications (par exemple, une application mobile React Native autonome et une application Web qui utilise le même composant ou bibliothèque de connexion pour communiquer avec le serveur API).

Cet article utilisera comme exemple un robot de publication Telegram. Son code source se trouve sur GitHub : https://www.php.cn/link/8164ca2fe04767628ac1c6813e8a0867. Téléchargez et extrayez dans le dossier /apps/publish-bot, puis exécutez la commande d'installation :

<code class="language-bash">pnpm install</code>

Créer une boîte à outils Telegram

Créez un dossier nommé /packages dans le dossier telegram-utils et initialisez PNPM et TypeScript :

<code class="language-bash">pnpm init && pnpm add -D typescript && pnpm tsc --init</code>

Ce package fournira une fonction permettant de combiner le texte et les légendes de tous les messages (texte, vidéo et photo). Le package Telegraf doit être installé :

<code class="language-bash">pnpm add telegraf</code>

Tout le code source doit être situé dans le répertoire /src. Pour faciliter le regroupement fonctionnel, il est recommandé de créer différents dossiers. La fonction de combinaison de texte se situe dans le dossier /texts, le code est le suivant :

<code class="language-typescript">// packages/telegram-utils/src/texts/combineTexts.ts

import { Message } from 'telegraf/types';
import { FmtString, join } from 'telegraf/format';

type GroupedMessages = {
    photos: Array<Message.PhotoMessage>;
    videos: Array<Message.VideoMessage>;
    text: Array<Message.TextMessage>;
};

export const combineTexts = ({ photos, videos, text }: GroupedMessages) => {
    const photoTexts = photos
        .map(photo => photo.caption ? new FmtString(photo.caption, photo.caption_entities) : undefined)
        .filter((t): t is Required<FmtString> => t !== undefined);

    const videoTexts = videos
        .map(video => video.caption ? new FmtString(video.caption, video.caption_entities) : undefined)
        .filter((t): t is Required<FmtString> => t !== undefined);

    const allTexts = [];

    if (text.length) allTexts.push(join(text.map(t => new FmtString(t.text, t.entities))), '\n');
    if (photoTexts.length) allTexts.push(join(photoTexts, '\n'));
    if (videoTexts.length) allTexts.push(join(videoTexts, '\n'));

    return join(allTexts, '\n');
};</code>

Description du code :

  • La fonction saisit des messages regroupés par type : photo, vidéo ou texte
  • Les messages multimédias doivent être convertis en chaînes FMT contenant le titre et les entités de titre. Pour un filtrage ultérieur, undefined doit être renvoyé
  •  ;
  • Concaténez les tableaux de texte étape par étape, pour finalement combiner tous les textes en un seul grand message.

Créez un fichier d'index pour le dossier /texts :

<code class="language-bash">pnpm init</code>

Utilisez le champ package.json dans le fichier exports pour paramétrer l'export de la fonction package :

<code class="language-yaml">// pnpm-workspace.yaml

packages:
  - 'packages/**'
  - 'apps/**'</code>

Pour identifier les packages Monorepo dans votre application, ajoutez le préfixe @monorepo à tous les packages. Renommez le package package.json dans le fichier telegram-utils :

<code class="language-bash">pnpm install</code>

Ajouter un script de build :

<code class="language-bash">pnpm init && pnpm add -D typescript && pnpm tsc --init</code>

Fichier package.json complet :

<code class="language-bash">pnpm add telegraf</code>

Configurez le compilateur TypeScript : activez la compilation incrémentielle pour gagner du temps de construction et traitez uniquement les parties modifiées ; activez la compilation composée pour utiliser les références de projet. Définissez le dossier /src comme rootDir et le outDir du package comme /dist. Mise à jour tsconfig.json :

<code class="language-typescript">// packages/telegram-utils/src/texts/combineTexts.ts

import { Message } from 'telegraf/types';
import { FmtString, join } from 'telegraf/format';

type GroupedMessages = {
    photos: Array<Message.PhotoMessage>;
    videos: Array<Message.VideoMessage>;
    text: Array<Message.TextMessage>;
};

export const combineTexts = ({ photos, videos, text }: GroupedMessages) => {
    const photoTexts = photos
        .map(photo => photo.caption ? new FmtString(photo.caption, photo.caption_entities) : undefined)
        .filter((t): t is Required<FmtString> => t !== undefined);

    const videoTexts = videos
        .map(video => video.caption ? new FmtString(video.caption, video.caption_entities) : undefined)
        .filter((t): t is Required<FmtString> => t !== undefined);

    const allTexts = [];

    if (text.length) allTexts.push(join(text.map(t => new FmtString(t.text, t.entities))), '\n');
    if (photoTexts.length) allTexts.push(join(photoTexts, '\n'));
    if (videoTexts.length) allTexts.push(join(videoTexts, '\n'));

    return join(allTexts, '\n');
};</code>

Intégration

Retournez à /apps/publish-bot et ajoutez le package @monorepo/telegram-utils aux dépendances. Notez que vous n'avez pas besoin de préciser la version du package, utilisez workspace:* pour indiquer :

<code class="language-typescript">// packages/telegram-utils/src/texts/index.ts

export * from './combineTexts';</code>

Installer les dépendances :

<code class="language-json">// packages/telegram-utils/package.json

"exports": {
    "./texts": {
        "import": "./src/texts/index.ts",
        "require": "./dist/texts/index.js"
    }
}</code>

Mettre à jour la commande preview pour les robots de publication :

<code class="language-json">// packages/telegram-utils/package.json

"name": "@monorepo/telegram-utils"</code>

Mise à jour/apps/publish-bot/tsconfig.json :

<code class="language-json">// packages/telegram-utils/package.json

"scripts": {
    "build": "tsc -p tsconfig.json"
}</code>

Avant de construire le code de l'application, vous devez créer toutes les dépendances :

<code class="language-json">// packages/telegram-utils/package.json

{
    "name": "@monorepo/telegram-utils",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "build": "tsc -p tsconfig.json"
    },
    "keywords": [],
    "license": "ISC",
    "exports": {
        "./texts": {
            "import": "./src/texts/index.ts",
            "require": "./dist/texts/index.js"
        }
    },
    "devDependencies": {
        "typescript": "^5.7.3"
    },
    "dependencies": {
        "telegraf": "^4.16.3"
    }
}</code>

Résumé

Le bot de publication utilise désormais des bibliothèques/packages partagés internes et est situé dans Monorepo. Cela permet de créer rapidement de nouvelles fonctionnalités et de réutiliser le code dans plusieurs applications.

Image via Gabriel Heinzer sur Unsplash

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn