📚
Vite+React+TypeScriptの環境構築
Viteとは
Vue.jsの開発者でもあるEvan You氏が中心となって開発している、フロントエンドのビルドツールで、webpackよりも高速でビルドされ、開発体験が大幅に良くなるようです。
ViteのCLIを使って構築する
今回は、vite公式を参考に環境構築を行う。
- クイックスタートコマンドの実行
プロジェクトを作りたい階層で下記コマンドを実行する
pnpm create vite
- プロジェクトの名前を入力する
今回はsample_vite_reactと入力する
? Project name: › sample_vite_react
- 使用するフレームワークの選択を行う
今回は、Reactを使用したいので、Reactまでカーソルを移動し、選択する。
? Select a framework
Vanilla
Vue
❯ React
Preact
Lit
Svelte
Solid
Qwik
Others
- 使用言語とコンパイラーの選択の選択を行う
今回はReact+TypeScriptの構築のため、TypeScriptもしくはTypeScript+SWCを選択する。
※SWCはBabelと同じコンパイラーツールのこと。Next.jsで採用されている。
? Select a variant
TypeScript
❯ TypeScript + SWC
JavaScript
JavaScript + SWC
- 動作確認
プロジェクトへ移動する
cd sample_vite_react
node_modulesをインストールする
pnpm i
アプリケーション起動する
pnpm dev
下記画像のように立ち上がれば環境構築は完了です！
最終的なコードは下記添付のGitHubを参照
Discussion