Maison >interface Web >js tutoriel >Construisez et exécutez votre projet dans Monorepo avec PNPM
Organisation du code projet : Polyrepo vs Monorepo
Il existe deux manières principales d'organiser le code d'un projet :
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 :
undefined
doit être renvoyé 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!