Bunでモノレポ環境を構築してみた

2024-11-06

2024-11-08

Bun セットアップ

まずbun-workspaceというディレクトリを作成し、bun initコマンドで初期設定を行います。

mkdir bun-workspace
cd bun-workspace
bun init -y

初期設定が完了すると以下のような構造になります。

bun-workspace/
  ├── .gitignore
  ├── bun.lockb
  ├── index.ts
  ├── package.json
  ├── README.md
  └── tsconfig.json

ルートパッケージは誤送信を防ぐため、package.jsonのprivateフィールドを設定します。

package.json

{
  "name": "bun-workspace",
  "private": true,
  "module": "index.ts",
  "type": "module",
  "devDependencies": {
    "@types/bun": "latest"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  }
}

ワークスペース設定

ワークスペースに含めたいパッケージをworkspaceフィールドに指定します。

ここではpackagesディレクトリをワークスペースにしたいため、以下のように設定します。

package.json

{
  "name": "bun-workspace",
  "private": true,
  "workspaces": ["packages/*"],
  "module": "index.ts",
  "type": "module",
  "devDependencies": {
    "@types/bun": "latest"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  }
}

パッケージ設定

packagesディレクトリ配下にappとlibを作成し、さらにそれぞれにindex.tsとpackage.jsonを作成します。

以下のようなファイル構造になります。

bun-workspace/
  ├── packages
  │   ├── app
  │   │   ├── index.ts
  │   │   └── package.json
  │   └── lib
  │       ├── index.ts
  │       └── package.json
  ├── .gitignore
  ├── bun.lockb
  ├── index.ts
  ├── package.json
  ├── README.md
  └── tsconfig.json

lib パッケージ

libパッケージを設定していきます。

特定のパッケージのみにライブラリを追加するには、そのディレクトリに移動しbun addするだけです。

cd package/lib
bun add es-toolkit

NOTE

es-toolkitは日常的に使えるユーティリティ関数をまとめて提供しているライブラリになります。 lodashよりバンドルサイズが小さく、パフォーマンスも高いです。

より詳しくは以下のサイトをご覧ください。

es-toolkitA state-of-the-art, high-performance JavaScript utility library with a small bundle size and strong type annotations.

es-toolkit.slash.page

package.jsonは以下のようになります。

packages/lib/pakcage.json

{
  "name": "lib",
  "version": "1.0.0",
  "main": "index.ts",
  "type": "module",
  "dependencies": {
    "es-toolkit": "^1.26.1"
  }
}

他のパッケージから参照できる関数をindex.tsに設定します。ここではmyShuffle関数を設定しています。

packages/lib/index.ts

import { shuffle } from "es-toolkit";
 
export const myShuffle = <T>(arr: T[]): T[] => shuffle(arr);

app パッケージ

次にappパッケージの設定をします。

ここではlibパッケージからmyShuffle関数をインポートし、コンソールで出力するという内容を記述します。

ワークスペース間で依存関係を追加するにはdependenciesにworkspace:*を追加します。

packages/app/pakcage.json

{
  "name": "app",
  "version": "1.0.0",
  "main": "index.ts",
  "type": "module",
  "dependencies": {
    "lib": "workspace:*"
  }
}

上記のように追加したら、ルートディレクトリでbun installを実行することですべてのワークスペースの依存関係をインストールできます。

bun install

あとはapp/index.tsで関数を呼ぶだけで使用できます。

packages/app/index.ts

import { myShuffle } from "lib";
 
const data = [1, 2, 3, 4, 5];
 
console.log(myShuffle(data));

cd packages/app
bun run index.ts
> [ 4, 1, 5, 3, 2 ]

複数のパッケージを一度に実行

bunの--filterフラグを使用すれば、ワークスペース内の複数のパッケージを簡単に実行できます。

たとえば以下のようにpackagesディレクトリ内にviteで作成したfrontendパッケージと、honoで作成したapiパッケージがあるとします。

bun-workspace/
  └── packages
      ├── api
      │   └── package.json
      └── frontend
          └── package.json

このとき、それぞれのpackage.jsonのscriptフィールドにdevコマンドが設定されていれば、bun --filter '*' devを実行することで 2 つの開発環境を立ち上げることができます。

bun --filter '*' dev

アスタリスク部分は Glob に対応しているため、特定のパッケージにマッチさせることも可能です。

たとえば、pkg-aとpkg-bというパッケージがあり、pkgと付くもののみ立ち上げたい場合は、

bun --filter 'pkg*` dev

とするだけで起動します。

また、特定ディレクトリ配下にあるパッケージすべてを立ち上げたい場合は、

bun --filter './pakcages/pkg/**' dev

で起動します。

さいごに

今回試したコードは GitHub にアップしています。

GitHub - daichi2mori/bun-workspaceContribute to daichi2mori/bun-workspace development by creating an account on GitHub.

github.com