Home Icon

d2m

XGitHub

bunとviteを使ってreact構築

Published Icon
2024-06-26
Tag Icon
Bun/Vite/React

公式サイト

Getting StartedNext Generation Frontend Tooling
faviconvitejs.dev
ogp
Build a frontend using Vite and Bun - Bun
faviconbun.sh
ogp

プロジェクト作成

  1. コマンド実行
bunx create-vite
  1. プロジェクト名 上記コマンドを実行するとプロジェクト名を聞かれるので、好きな名前を入力する
? Project name: › my-react-app
  1. フレームワーク選択 React を選択した状態で Enter
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
  1. 言語とトランスパイラー選択 今回は TypeScript + SWC を選択します。
? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
❯   TypeScript + SWC
    JavaScript
    JavaScript + SWC
  1. 依存関係インストール cdでプロジェクトディレクトリに移動し、依存関係をインストールする
cd my-react-app
bun install
  1. スクリプト編集 開発用と本番用のスクリプトを変更する
"scripts": {
-  "dev": "vite",
-  "build": "vite build",
+  "dev": "bunx --bun vite",
+  "build": "bunx --bun vite build",
},
  1. 開発サーバーを起動する
bun run dev

以下のような画面が起動すれば成功

react起動画面

オプションでテンプレートを直接指定

bunx create-vite my-react-app --template react-ts
cd my-react-app
bun install
bun run dev

上記のコマンドを実行することで、Vite が用意してくれているテンプレートを使用でき、後は依存関係をインストールするだけですぐに開発できるようになる

しかし、このテンプレートのトランスパイラーは Babel を使用している点に注意