はじめに
で、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 を使っていきたいと思います！