ホームページ > ウェブフロントエンド > jsチュートリアル > PNPM を使用して Monorepo でプロジェクトをビルドして実行する

PNPM を使用して Monorepo でプロジェクトをビルドして実行する

Patricia Arquette
リリース: 2025-01-19 16:33:12
オリジナル
433 人が閲覧しました

Build and run your project in Monorepo with PNPM

プロジェクト コードの構成: Polyrepo と Monorepo

プロジェクト コードを整理するには、主に 2 つの方法があります:

  1. Polyrepo: プロジェクト コードを異なるリポジトリに分散します。これが現在の標準的な手法であり、複数のチームが独自の倉庫を持ち、製品とパイプラインを構築し、自律性を持っています。
  2. Monorepo: すべてのプロジェクト コードを 1 つのリポジトリに一元化します。プロジェクトは、コードの再利用を容易にし、標準機能を共有するためにアプリケーションとパッケージに分割されます。これにより、サードパーティのパッケージのバージョンを統一し、依存関係のソース コードを再帰的に構築し、CI/CD パイプラインに同じツールを使用できます。

Monorepo は、Yandex などの多くの大手テクノロジー企業によって使用されています。 Monorepo は、チームやビジネス ユニット間でアイデアやベスト プラクティスを共有するのに役立ちます。 Monorepo および関連ツールの詳細については、https://www.php.cn/link/b01ccf4f29b57b0b1bdb9407050db28d をご覧ください。この記事では、PNPM を使用して Monorepo を構築する簡単なソリューションに焦点を当てます。

PNPM は ワークスペース を使用して、複数のプロジェクトを単一のリポジトリに統合します。

環境セットアップ

まず、新しい Monorepo プロジェクトとして空のフォルダーを作成します。ウェアハウスで PNPM を初期化します:

pnpm init
ログイン後にコピー
ログイン後にコピー

次に、パッケージ フォルダーを説明する pnpm-workspace.yaml ファイルを作成します。

// pnpm-workspace.yaml

packages:
  - 'packages/**'
  - 'apps/**'
ログイン後にコピー
ログイン後にコピー

/packages フォルダーには共有ライブラリが保持され、/apps フォルダーにはアプリケーション (たとえば、スタンドアロンの React Native モバイル アプリケーションと、同じコンポーネントまたは接続ライブラリを使用して API サーバーと通信する Web アプリケーション) が保持されます。

この記事では例として Telegram パブリッシング ロボットを使用します。そのソース コードは GitHub にあります: https://www.php.cn/link/8164ca2fe04767628ac1c6813e8a0867/apps/publish-bot フォルダーにダウンロードして解凍し、インストール コマンドを実行します:

pnpm install
ログイン後にコピー
ログイン後にコピー

テレグラムツールキットの作成

/packages フォルダー内に telegram-utils という名前のフォルダーを作成し、PNPM と TypeScript を初期化します。

pnpm init && pnpm add -D typescript && pnpm tsc --init
ログイン後にコピー
ログイン後にコピー

このパッケージは、すべてのメッセージ (テキスト、ビデオ、写真) のテキストとキャプションを組み合わせる機能を提供します。 Telegraf パッケージをインストールする必要があります:

pnpm add telegraf
ログイン後にコピー
ログイン後にコピー

すべてのソース コードは /src ディレクトリに配置する必要があります。機能的なグループ化を容易にするために、異なるフォルダーを作成することをお勧めします。テキストを結合する関数は /texts フォルダーにあり、コードは次のとおりです:

// 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');
};
ログイン後にコピー
ログイン後にコピー

コードの説明:

  • この関数は、写真、ビデオ、またはテキストのタイプごとにグループ化されたメッセージを入力します。
  • メディア メッセージは、タイトルとタイトル エンティティを含む FMT 文字列に変換される必要があります。後続のフィルタリングでは、undefined が返される必要があります。
  • テキスト配列を段階的に連結し、最終的にすべてのテキストを 1 つの大きなメッセージに結合します。

フォルダーのインデックス ファイルを作成します: /texts

pnpm init
ログイン後にコピー
ログイン後にコピー

ファイルの package.json フィールドを使用して、パッケージ関数のエクスポートを設定します: exports

// pnpm-workspace.yaml

packages:
  - 'packages/**'
  - 'apps/**'
ログイン後にコピー
ログイン後にコピー
アプリケーション内の Monorepo パッケージを識別するには、すべてのパッケージに接頭辞

を追加します。 @monorepo ファイル内の package.json パッケージの名前を変更します: telegram-utils

pnpm install
ログイン後にコピー
ログイン後にコピー
ビルドスクリプトを追加:

pnpm init && pnpm add -D typescript && pnpm tsc --init
ログイン後にコピー
ログイン後にコピー
完全な

ファイル: package.json

pnpm add telegraf
ログイン後にコピー
ログイン後にコピー
TypeScript コンパイラーを構成します。インクリメンタル コンパイルを有効にしてビルド時間を節約し、変更された部分のみを処理します。プロジェクト参照を使用するために複合コンパイルを有効にします。

フォルダーを /src として定義し、パッケージの rootDiroutDir として定義します。 /dist を更新しました: tsconfig.json

// 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');
};
ログイン後にコピー
ログイン後にコピー

統合

に戻り、/apps/publish-bot パッケージを依存関係に追加します。パッケージのバージョンを指定する必要はないことに注意してください。@monorepo/telegram-utils を使用して次のように示します。 workspace:*

依存関係をインストールします:
// packages/telegram-utils/src/texts/index.ts

export * from './combineTexts';
ログイン後にコピー

ボットを公開するための
// packages/telegram-utils/package.json

"exports": {
    "./texts": {
        "import": "./src/texts/index.ts",
        "require": "./dist/texts/index.js"
    }
}
ログイン後にコピー
コマンドを更新します:

preview

更新
// packages/telegram-utils/package.json

"name": "@monorepo/telegram-utils"
ログイン後にコピー
:

/apps/publish-bot/tsconfig.json

アプリケーション コードをビルドする前に、すべての依存関係をビルドする必要があります。
// packages/telegram-utils/package.json

"scripts": {
    "build": "tsc -p tsconfig.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"
    }
}
ログイン後にコピー
概要

リリース ボットは内部共有ライブラリ/パッケージを使用し、Monorepo に配置されています。これにより、新しい機能を迅速に構築し、複数のアプリケーション間でコードを再利用できるようになります。

Unsplash の Gabriel Heinzer 経由の画像

以上がPNPM を使用して Monorepo でプロジェクトをビルドして実行するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート