stR1Ng
← Blog
by 前の田んぼ#React#Vite

How to Vite

viteの初期設定などについて書いてます

はじめに

vite(ヴィート)を使う機会があったので使い方について自分なりにまとめてみた。 使った時にブログはzennにまとめている viteを使ってみた

Vite使い方

Viteインストール

viteオンリーをインストール

npm install --save-dev vite

vite テンプレートと共にインストール

npm create vite
npm create vite@latest [ファイル名]
 npm create vite       
 
> npx
> create-vite
 
│
◆  Project name:
│  vite-turtorial-blog
│
◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
 
◆  Select a variant:
│  ● TypeScript
│  ○ TypeScript + React Compiler
│  ○ TypeScript + SWC
│  ○ JavaScript
│  ○ JavaScript + React Compiler
│  ○ JavaScript + SWC
│  ○ React Router v7 ↗
│  ○ TanStack Router ↗
│  ○ RedwoodSDK ↗
│  ○ RSC ↗
└
◆  Use rolldown-vite (Experimental)?:
│  ○ Yes
│  ● No
└
◆  Install with npm and start now?
│  ● Yes / ○ No
└

Select a framework:

Vanilla（＝素のJavaScript）

  • 余計なフレームワークなし、ただのJS + HTML + CSS。

Vue

  • Reactと並んで超人気のフロントエンドフレームワーク

React

  • 世界で最も人気なフロントエンドライブラリ。

Preact

  • React互換の「軽量版」。

Lit

  • Web Components ベースのモダンUIライブラリ。

Svelte

  • コンポーネントをビルド時に最適化して、実行時は最小限のコードになる。

Solid

  • Reactライクだけど、実行時が超軽量なフレームワーク。

Qwik

  • 超高速・超省メモリを目指す最新フレームワーク。

Angular

  • Google製のフレームワーク。フルスタックで、ルーター・DI・フォーム・ビルド・テストまで全部入り。

Marko

  • eBayが開発した SSR 特化フレームワーク。

Select a variant:

  • TypeScript（デフォルト）
    • そのまま TS を使う最小セット。
  • TypeScript + React Compiler
    • TSに加えて React Compiler（React公式の新最適化コンパイラ）前提の設定。
  • TypeScript + SWC
    • TSを SWC（Rust製トランスパイラ） で超高速にビルドする構成。
  • JavaScript
    • 素の JS。型は使わない。
  • JavaScript + React Compiler
    • JSで React Compiler を使う構成。
  • JavaScript + SWC
    • JS を SWC で高速ビルド。
  • React Router v7
    • React の定番ルーターの最新版系。
  • TanStack Router
    • 型推論が強力で TypeScriptのDXが非常に良いモダンルーター。
  • RedwoodSDK ↗
    • RedwoodJS（フルスタックFW）のルーティング/SDK。
  • RSC ↗（React Server Components）
    • サーバでコンポーネントを実行して、クライアントに最小限だけ送る方式。

Use rolldown-vite (Experimental)?:

新しいビルドエンジンであるrolldownを使うかと言う確認

本来、Rollupを使って本番ビルドをしているが、その代わりの開発しているRolldownにするかの確認

Install with npm and start now?

これはnpm installをしてさらにすでにもうlocalhostで開発サーバーを立ち上げるかの確認

開発サーバーの立ち上げ

上のコマンドを打った場合まだ、ローカルサーバーのモジュールがインストールされていないのでこれをする（Install with npm and stat nowを選んだ方は飛ばしていい）

$npm install

ローカルサーバーのrun

$npm run dev

runのコマンドの変更とポート番号の変更 package.jsonをいじる 以下の場所を変える

"scripts": {
    "start": "vite --port 8080" , //ここが元々{"dev": "vite"}だった
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

デプロイ周りについて

デプロイするには静的ファイル配信をしなければなりません。それの準備を行うのが以下のコマンドです。

#build
npm run build

そして、buildする前に静的ファイルを確認するのが以下のpreviewコマンドです

npm run preview

package.jsonの以下を変えるとport番号を変更することができる

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 8080"//ここの--portはもともとない
  },