リポジトリ
ドキュメント
モノレポハンドブック
パッケージの公開
バンドル

モノレポでのパッケージのバンドル

内部パッケージとは異なり、外部パッケージはnpm (新しいタブで開きます)にデプロイ*でき*、ローカルで使用することもできます。このガイドでは、パッケージをECMAScriptモジュール (新しいタブで開きます)（esm）とCommonJSモジュール (新しいタブで開きます)（cjs）の両方でバンドルします。これらはnpmで最も一般的に使用される形式です。

ビルドスクリプトの設定

内部パッケージチュートリアルを使用して作成したパッケージから始めましょう。

そこで、いくつかの加算と減算のためのヘルパー関数を含むmath-helpersパッケージを作成しました。このパッケージはnpmに適していると考え、バンドルすることにしました。

そのチュートリアルの最後には、/packages以下に設定されたパッケージがあり、次のようになっていました。

├── apps
│   └── web
│       └── package.json
├── packages
│   └── math-helpers
│       ├── src
│       │   └── index.ts
│       ├── tsconfig.json
│       └── package.json
├── package.json
└── turbo.json

バンドラーを使用して、math-helpersにbuildスクリプトを追加します。どれを選べばよいかわからない場合は、tsup (新しいタブで開きます)をお勧めします。

まず、パッケージマネージャーを使用して、packages/math-helpers内にtsupをインストールします。

{
  "scripts": {
    "build": "tsup src/index.ts --format cjs,esm --dts"
  }
}

tsupはデフォルトでdistディレクトリに出力ファイルを作成するので、次の手順を実行する必要があります。

  1. dist を .gitignore ファイルに追加して、git によってコミットされないようにしてください。
  2. turbo.json の build の出力に dist を追加します。
{
  "pipeline": {
    "build": {
      "outputs": ["dist/**"]
    }
  }
}

こうすることで、tsup が実行されたときに、Turborepo によって出力がキャッシュされるようになります。

最後に、パッケージのエントリポイントを更新する必要があります。 package.json 内で、CommonJS モジュール（cjs）を使用するクライアントの場合は main を ./dist/index.js を指すように変更し、ECMAScript モジュール（esm）を使用するクライアントの場合は module を ./dist/index.mjs を指すように変更し、types を型定義ファイルである ./dist/index.d.ts を指すように変更します。

{
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts"
}

cjs と esm の両方にバンドルする必要はありません。ただし、パッケージをより幅広い環境で使用できるようになるため、推奨されます。

main、module、types を使用することでエラーが発生した場合は、tsup のドキュメント (新しいタブで開きます)を参照してください。

バンドルは複雑なトピックであり、ここではすべてを網羅することはできません。

アプリケーションの前にパッケージをビルドする

turbo run build を実行する前に、考慮すべきことが1つあります。モノレポにタスクの依存関係を追加しました。 packages/math-helpers の build は、apps/web の build の**前**に実行する必要があります。

幸いなことに、dependsOn を使用して簡単に設定できます。

{
  "pipeline": {
    "build": {
      "dependsOn": [
        // Run builds in workspaces I depend on first
        "^build"
      ]
    }
  }
}

これで、turbo run build を実行すると、アプリケーションをビルドする**前**にパッケージが自動的にビルドされます。

開発スクリプトの設定

設定に小さな問題があります。パッケージは正常にビルドされていますが、開発ではうまく機能していません。 math-helpers パッケージに加えた変更がアプリケーションに反映されていません。

これは、作業中にパッケージを再ビルドするための dev スクリプトがないためです。簡単に追加できます。

{
  "scripts": {
    "build": "tsup src/index.ts --format cjs,esm --dts",
    "dev": "npm run build -- --watch"
  }
}

これは --watch フラグを tsup に渡します。つまり、ファイルの変更を監視します。

turbo.json に開発スクリプトをすでに設定している場合、turbo run dev を実行すると、packages/math の開発タスクが apps/web の開発タスクと並行して実行されます。

まとめ

これでパッケージは npm へのデプロイを検討できる状態になりました。バージョン管理と公開セクションで、まさにそれを行います。