pnpm create vite my-app --template react-ts はおそらく 30 回くらい流しているコマンドだが、今だに生成後のファイルをみて、「これなんだっけ？」と思って調べている。
最近少し変化もあったようなので、改めて調べてまとめておく。
vite.config.js
viteコマンド (pnpm run devもvite) を実行すると最初に参照される。- plugin などもここにする。
- このファイルが存在しない場合でも、Vite は正常に動作し、デフォルトの設定を使用してプロジェクトを実行する。
tsconfig.json
tsconfig.node.json / tsconfig.app.json を参照する。 参照せずに全てをそのまま書く場合もある
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}
tsconfig.node.json / tsconfig.app.json
vite は node server を立てつつ、ブラウザフロントエンドも描画するためのコンパイルも行っているので、2つの設定ファイルが必要 *1
ファイル内の
"include": ["vite.config.ts"]
が、 compilerOptions がどのファイルを対象にしているかを示す。
最初に生成された tsconfig.node.json は vite.config.ts をコンパイルするためだけのものと言える
eslint.config.js
eslint の設定
src/vite-env.d.ts
最初に1行だけ記載されている
/// <reference types="vite/client" />
は、Viteの組み込み型定義を拡張している。
global な型を定義できるので、Viteプロジェクトで環境変数の型定義を管理するのによく使用される
public/ と src/assets
生成されたファイルを見ると、png は src/assets で svg は vite に置かれている。 SVG はすでに最適化されてデータ量が小さく、直接配信できるため、public に置かれている。
src/assets に置かれたファイルは ビルドプロセスに含まれるので、圧縮などの最適化を行うことができる。
また、ビルドプロセスに含まれることでファイル名に hash 値が付与され、デプロイ時にキャッシュの invalidate などをせずとも新しい assets を参照するようにできる。 逆に、 public/ のファイルをファイル名そのままに更新しても、CDN にキャッシュが残っているために更新が反映されないことがある。
