Reactプロジェクトでnpm workspaceを使ってみる

npmのworkspace機能を使って、UIパッケージと、アプリケーションパッケージを分けて開発できるようにしていきます。

構成

この構成で作成してみます。
appsには独立して動くアプリケーションのパッケージを入れます。
packagesは単体では動かないライブラリとして使われるパッケージを入れます。

root
  apps
    app
  packages
    ui

ルートのパッケージを作成する

以下のコマンドでルートのpackage.jsonを作成します。

npm init -y

ルートのpackage.jsonを編集する

ルートのpackage.jsonに以下を追加します。

package.json

{
  "workspaces": [
    "apps/*",
    "packages/*"
  ]
}

パッケージを入れるディレクトリを作成する

mkdir apps
mkdir packages

アプリケーションパッケージ(Vite-React)を作成する

appsディレクトリの中で以下のコマンドを実行します。
パッケージの名前は@repo/appにします。

npm create vite@latest -- --template react-swc-ts

UIパッケージを作成する

uiディレクトリの中で以下のコマンドを実行します。
パッケージの名前は@repo/uiにします。

npm create vite@latest -- --template react-swc-ts

UIパッケージのコンポーネントを変更する

srcの中を消して、src/index.tsを作成します。
ボタンだけのコンポーネントを作成してみます。

packages/ui/src/index.ts

export function Button() {
  return <button>ボタン</button>
}

UIパッケージのpackage.jsonを編集する

exportの設定を加えます。

packages/ui/package.json

{
  "exports": {
    ".": "./src/index.ts"
  },
}

アプリケーションパッケージのpackage.jsonを編集する

dependenciesに設定を加えます。

apps/app/package.json

{
  "dependencies": {
    "@repo/ui": "*"
  },
}

以上で設定完了です。

アプリケーションパッケージでUIパッケージを使う

cssは適宜削除してください。
ソースコードに組み込みます。

apps/app/App.tsx

import { Button } from "@repo/ui"

function App() {

  return (
    <>
      <div>Hello</div>
      <Button></Button>
    </>
  )
}

export default App

リポジトリルートで以下のコマンドを実行します。

npm run dev -w app

UIパッケージが読み込めるようになりました👍