今更の Vite で React + TypeScript のプロジェクト作ってみた

ちょっぱやだと噂の Vite で React のプロジェクトを作ってみた素振りのメモ

Vite とゎ？

昨今の巨大な JavaScript のプロジェクトはモジュールバンドルのパフォーマンスがボトルネックになってきていた。
従来のものは更新頻度の少ないファイルも全てバンドルして提供していた。
開発サーバーでは10倍から100倍高速である esbuild を用いて依存関係を事前にバンドルし、 native ESM を利用することで頻繁に更新されるファイルを Dynamic import するようにして高速化させている。
Production ではコード分割やCSSの処理が成熟している Rollup を使ってビルドを行う。ESM はまだブラウザのサポートが弱く、バンドルされてない ESM は非効率なためビルドを行う設計にしている。将来的に esbuild の機能が安定してきたら Rollup から esbuild を用いたビルドに変更する可能性がある。

Why Vite をざっくりまとめるとこんな感じでしょうか (解釈間違いあれば教えて下さい)
パフォーマンスの良いバンドラーとブラウザの ESM の仕組みを利用して従来のものより効率的かつ高速に動作するようにしたよ！って印象です。

Vite で React のプロジェクトを作成する

$ npm create vite@latest <project name>
# package json に記載されるパッケージ名
? Package name: ›
# react を選択
? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
    vue
❯   react
    preact
    lit
    svelte
# TypeScript を使う場合は react-ts を選択
? Select a variant: › - Use arrow-keys. Return to submit.
    react
❯   react-ts

Scaffolding project in /Users/kikiki/<project name>

Done. Now run:

  npm install
  npm run dev

Scaffolding project Done. のメッセージが表示され新規ディレクトリが作成されていればOK

/project name
  |- .gitignore
  |- index.html … エントリーポイント
  |- /src … react のソースコード
  |- tsconfig.json
  |- tsconfig.node.json
  |- vite.config.ts … vite の設定ファイル

note.

調べた blog に載っていた npm init vite でも同じ手順でプロジェクトが作成できました。ドキュメントに見当たらなかったので旧バージョンのコマンドなのかもしれませんが、深くは調べていません。

プロジェクトディレクトリを作成せず、現在の場所に展開したい場合

<project name> を指定せず . にすれば OK
⚠ <project name> が空の時は Package name と同じ名称のディレクトリが作成される

$ npm create vite@lastest .
# ディレクトリ内にファイルが存在する場合は既存のファイルを削除しても構わないか聴かれる
# .git など vite が作成しないファイルやディレクトリも消されてしまうっぽので注意が必要
? Current directory is not empty. Remove existing files and continue? › (y/N)

React project の起動

メッセージにあったようにプロジェクトディレクトリに移動して、npm install して npm run dev すればOK

$ npm install
$ npm run dev
 vite v2.9.9 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 1954ms.

localhost:3000/ にアクセスして React のロゴがクルクル回る初期画面が表示されていればOK
⚠ npx create react-app と異なり自動でブラウザでアプリを開いてくれないので自分で localhost:3000/ にアクセスする必要がある
dev モードでは HMR (Hot Module Replacement) = コードが変更されると自動的に再描画する仕組みが入っているので、このまますぐに開発ができそうです！

その他のコマンド

プロジェクトのビルド … npm run build
ビルドした状態のプレビュー … npm run preview

vite は dev の時は esbuild でビルド時は Rollup なのでビルド時のプレヴューができるようになってるっぽいです

起動時に自動でブラウザを開くようにする

create-react-app と同じように実行時に自動的にブラウザが開くようにする
vite.config.ts に下記オプションを追加すればOK

vite.config.ts

export default defineConfig({
+  server: {
+    open: true,
+  },
  plugins: [react(), tsconfigPaths()],
});

既に localhost がブラウザで開いている場合は別のタブが開くのではなく既に開いているタブが再起動するので無駄にタブが増えず良きです

cf. Configuring Vite | Vite

static なファイルの置き場所

vite では JS ファイルで import した画像などは自動的にハッシュ化されたパスに変換してくれるようです
JS でバンドルするまでもない static な CSS や画像は /public というフォルダを作成しそこに配置すればOK
⚠ デフォルトでは public フォルダがが存在しないので作成する必要がある
/public ディレクトリ内に置かれたファイルは JS から / でアクセスが可能になります

例

/project name
  |- index.html
  |- /public
  |    |- /images
  |        |- sample.jpg 
  |- /src

/src/App.tsx

function App() {
  return (
    {/* /public/images/sample.jpg は /images/sample.jpg でアクセスできる */}
    <img src="/images/sample.jpg" alt="" />
  )
}

cf. Configuring Vite | Vite

所管

CLI が用意されているので、簡単に React + vite なプロジェクトを作成することができました！
体感として webpack な create-react-app より npm run dev した際の起動時間が超速って感じです。追って ESLint + Prettier などの設定もしてみたいと思います。
おわり ₍ ᐢ. ̫ .ᐢ ₎