👍
bunとviteを使ってreact構築
公式サイトはこちら
プロジェクト作成
- コマンド実行
bun create vite
- プロジェクト名
上記コマンドを実行するとプロジェクト名を聞かれるので、好きな名前を入力する
? Project name: › my-react-app
- フレームワーク選択
React を選択した状態で Enter
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
Vue
❯ React
Preact
Lit
Svelte
Solid
Qwik
Others
- 言語とトランスパイラー選択
今回は TypeScript + SWC を選択します。
SWC とは？
Rust で作成されたトランスパイラーで、Babel より高速に動きます。
最近では SWC がデフォルトスタンダードになっています。
? Select a variant: › - Use arrow-keys. Return to submit.
TypeScript
❯ TypeScript + SWC
JavaScript
JavaScript + SWC
- 依存関係インストール
cdでプロジェクトディレクトリに移動し、依存関係をインストールする
cd my-react-app
bun install
- スクリプト編集
開発用と本番用のスクリプトを変更する
"scripts": {
- "dev": "vite",
- "build": "vite build",
+ "dev": "bunx --bun vite",
+ "build": "bunx --bun vite build",
},
- 開発サーバーを起動する
bun run dev
以下のような画面が起動すれば成功
オプションでテンプレートを直接指定
bunx create-vite my-react-app --template react-ts
cd my-react-app
bun install
bun run dev
上記のコマンドを実行することで、Vite が用意してくれているテンプレートを使用でき、後は依存関係をインストールするだけですぐに開発できるようになる
しかし、このテンプレートのトランスパイラーは Babel を使用している点に注意
Discussion