Zenn
📚

Vite+React+TypeScriptの環境構築

2023/12/16に公開
React
TypeScript
Vite
tech

Viteとは

Vue.jsの開発者でもあるEvan You氏が中心となって開発している、フロントエンドのビルドツールで、webpackよりも高速でビルドされ、開発体験が大幅に良くなるようです。
https://vitejs.dev/

ViteのCLIを使って構築する

今回は、vite公式を参考に環境構築を行う。

  1. クイックスタートコマンドの実行

プロジェクトを作りたい階層で下記コマンドを実行する

pnpm create vite
  1. プロジェクトの名前を入力する

今回はsample_vite_reactと入力する

? Project name: › sample_vite_react
  1. 使用するフレームワークの選択を行う

今回は、Reactを使用したいので、Reactまでカーソルを移動し、選択する。

? Select a framework
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
  1. 使用言語とコンパイラーの選択の選択を行う

今回はReact+TypeScriptの構築のため、TypeScriptもしくはTypeScript+SWCを選択する。
※SWCはBabelと同じコンパイラーツールのこと。Next.jsで採用されている。

? Select a variant
    TypeScript
❯   TypeScript + SWC
    JavaScript
    JavaScript + SWC
  1. 動作確認

プロジェクトへ移動する

cd sample_vite_react

node_modulesをインストールする

pnpm i

アプリケーション起動する

pnpm dev

下記画像のように立ち上がれば環境構築は完了です！

最終的なコードは下記添付のGitHubを参照
https://github.com/49takaya3989/sample_vite_react

Discussion