pnpmでvite, react, typescriptのprojectを作成する

Motivation

pnpmのベンチマークが気になったことと、主要なpackageでpnpmを利用していることがあり存在が気になっていた。
nx, lerna以外の monorepoの構成をpnpmで一度試してみたくなったことがこの記事のモチベーションです。

table of contents

作成しようとしているプロジェクト構成
pnpmのworkspace用のconfigファイルを作成する
vite, react, typescriptのprojectを作成する
起動してみる

1. 作成しようとしているプロジェクト構成

Motivationにもあるとおり、pnpmのmulti-package構成を利用したプロジェクト構成にしようとしています。

$ tree . -L 2

├── README.md
├── apps                  application packages
│   └── react-project     vite project
├── node_modules
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

1. pnpmのworkspace用のconfigファイルを作成する

$ mkdir vite-react-typescript && cd "$_"
$ npm init -y
$ touch pnpm-workspace.yaml
$ tree . -L 1
.
├── package.json
└── pnpm-workspace.yaml

applicationを記載するディレクトリ(/apps)を作成して、pnpm-workspace.yamlに追記します。

$ mkdir apps
$ vi pnpm-workspace.yaml

pnpm-workspace.yaml

packages:
  - 'apps/**'

追記が完了したら、viteのprojectをapps以下に作成していきます。

2. vite, react, typescriptのprojectを作成する

$ pwd
/vite-react-typescript/apps

$ pnpm create vite react-project --template react-ts
Library/pnpm/store/v3/tmp/dlx-71354      |   +1 +
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /Users/XXX/Library/pnpm/store/v3
  Virtual store is at:             Library/pnpm/store/v3/tmp/dlx-71354/node_modules/.pnpm
Library/pnpm/store/v3/tmp/dlx-71354      | Progress: resolved 1, reused 1, downloaded 0, added 1, done

Scaffolding project in /vite-react-typescript/apps/react-project...

Done. Now run:

  cd react-project
  pnpm install
  pnpm run dev

vite cliを利用してプロジェクトを作成したあとに、依存関係をインストールします。

$ pwd
/vite-react-typescript
$ pnpm install

3. 起動してみる

project rootディレクトリで、起動などを実施したいため、package.jsonを追記します。

/vite-react-typescript/package.json

"scripts": {
    "dev": "pnpm  --parallel --filter \"./**\" dev"
  },

$ pnpm dev
> vite-react-typescript@1.0.0 dev /vite-react-typescript
> pnpm  --parallel --filter "./**" dev

apps/react-project dev$ vite
apps/react-project dev:   VITE v4.0.1  ready in 2028 ms
apps/react-project dev:   ➜  Local:   http://127.0.0.1:5173/
apps/react-project dev:   ➜  Network: use --host to expose