はじめに

で、Svelteの環境を構築しましたが、Reactもよく使うので構築のメモを残しておきます。

手順

以下に沿ってやれば簡単に構築できます。

プロジェクトの作成

以下のコマンドを実行します。

bun create vite bun-vite-react-sample

すると対話形式で作成を進められます。
「React」、「TypeScript + SWC」を選択します。

✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Scaffolding project in ./bun-vite-react-sample...

Done. Now run:

  cd bun-vite-react-sample
  bun install
  bun run dev

起動してみる

以下のコマンドを順に実行します。

cd bun-vite-react-sample
bun install
bunx --bun vite

bunx --bun vite 実行後に、以下のような結果が出力されます。

  VITE v6.0.3  ready in 139 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

出力されたURLにアクセスすると無事に起動していることが確認できます。

package.jsonの修正

公式サイトに沿って、bunx --bun vite をシンプルに起動できるように修正します。

package.json の scripts を以下のように修正します。
公式サイトには dev の修正しか書かれてませんが、build と preview も一緒に修正してしまいましょう。

// ...
"scripts": {
- "dev": "vite",
+ "dev": "bunx --bun vite",
- "build": "tsc -b && vite build",
+ "build": "tsc -b && bunx --bun vite build",
  "lint": "eslint .",
- "preview": "vite preview"
+ "preview": "bunx --bun vite preview"
},
// ...

これで、以下のコマンドで起動できるようになりました。

bun run dev

ビルド

以下のコマンドを実行します。

bun run build

正常にビルドされました。

$ tsc -b && bunx --bun vite build
vite v6.0.3 building for production...
✓ 30 modules transformed.
dist/index.html                   0.46 kB │ gzip:  0.30 kB
dist/assets/react-CHdo91hT.svg    4.13 kB │ gzip:  2.05 kB
dist/assets/index-n_ryQ3BS.css    1.39 kB │ gzip:  0.71 kB
dist/assets/index-DMBE2hB0.js   143.90 kB │ gzip: 46.34 kB
✓ built in 265ms

起動してみます。

bun run preview
$ vite preview
  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

無事に起動していますね。

終わり

Svelte+SvelteKit に続いて、React+Vite 環境を構築しました。
しばらく、プライベートでは bun を使っていきたいと思います！