カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

Vite+React 簡単プロジェクト生成

create-react-appは更新が停止しているらしく、最近はViteでプロジェクトを生成するのが主流になりつつあるらしいです。
簡単にできるので早速試してみました。
npmyarnを使ってやってみたので、両方の例を紹介します。

Vite

Viteがインストールされていない場合は以下のコマンドでインストールします。

nom install -g vite

npm

まずはプロジェクト生成

npm create vite@latest

コマンドを実行するとプロジェクト名・フレームワーク選択・使用言語を聞かれるので、
入力・選択してください。

Project name: vite-project
Select a framework: React
Select a variant: Javascript

上記入力が完了するとプロジェクト名のフォルダが出来上がるので、
同フォルダに移動して以下のコマンドを順に実行します。

cd vite-project

依存ライブラリをインストール

npm install

開発用ビルド

npm run dev

ローカルのURLが表示されるのでブラウザでアクセス。
画面が表示されたらプロジェクト生成の完了です。

本番用ビルド

npm run build

本番用プレビュー

npm run preview

yarn

yarnの場合もほぼ同じです。

yarn create vite

プロジェクト名・フレームワーク選択・使用言語を入力・選択します。

Project name: vite-project
Select a framework: React
Select a variant: Javascript

上記入力が完了したらプロジェクト名のフォルダに移動します。

cd vite-project

依存ライブラリをインストール

yarn

開発用ビルド

yarn dev

こちらも画面が表示できたらプロジェクト生成の完了です。

本番用ビルド

yarn build

本番用プレビュー

yarn preview

コマンド一発でプロジェクト生成

npmyarnでも、コマンド一発でプロジェクトを生成することができます。

npm
npm create vite@latest vite-project -- --template react
yarn
yarn create vite vite-project --template react

参考URL:
はじめに|Vite

この記事がお役に立ちましたらシェアお願いします
179 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です