How to 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はもともとない
  },