8日目: create-vite を探訪

昨日は Cloudflare Workers でハロワしたので、今日は Vite でハロワする。

Vite は初期設定から node で実行したことがなくて、別言語のフレームワークで組み合わせてセットアップしたことしかない。

それにしても npm create コマンドは便利だけど、どういう仕組みなんだろう。

npm create --help を実行したら initエイリアスなのだと知る。

Stack Overflow によると

npm create vite@latestnpx create-vite@latest のショートハンドとのこと。

たしかに create-vite パッケージは存在するし、エントリポイントらしきものは存在する。

横道に逸れたがさっそくハロワ。React や Vue などのフレームワークをさくっと素振りしたいときに覚えておくと便利そうなので学ぶ。

オンラインでもそういう素振りするためのサービスはあるけれど、やっぱりコードは手元で書きたいのが世の常。

$ npm create vite@latest

Need to install the following packages:
  create-vite@5.0.0
Ok to proceed? (y)
✔ Project name: … hello-vite
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

Scaffolding project in /path/to/hello-vite...

Done. Now run:

  cd hello-vite
  npm install
  npm run dev

$ cd hello-vite
$ npm install
$ npm run dev

  VITE v5.0.4  ready in 338 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

ディレクトリ構成はこんな感じ

$ tree -I node_modules
.
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── counter.ts
│   ├── main.ts
│   ├── style.css
│   ├── typescript.svg
│   └── vite-env.d.ts
└── tsconfig.json

main.ts をちょっといじってみる

即更新されて気持ち良い!!(いや普通のことなんだけども)

ところで vite-env.d.ts とはなんだろう? 中身は

/// <reference types="vite/client" />

のみ。ChatGPT氏によると

vite-env.d.ts ファイルは、Vite プロジェクトにおいて型定義を提供するための TypeScript 定義ファイルです。Viteは、高速な開発サーバーと効率的なビルドシステムを提供するためのツールであり、TypeScriptプロジェクトとの統合もサポートしています。

このファイルが存在する理由は、プロジェクト全体で使用される型や型定義を一元管理するためです。vite-env.d.ts ファイルに含まれる /// <reference types="vite/client" /> 行は、Vite 開発サーバーにおいて使用される型定義を参照しています。

具体的には、"vite/client" は Vite 開発サーバーのクライアント側で使用される型を指定しています。これにより、開発時にViteが提供する機能や型を適切に認識し、開発者がこれらを利用する際に型エラーが発生しづらくなります。

このファイルを導入することで、Viteプロジェクト内で型情報を統一的に管理し、開発者エクスペリエンスを向上させることができます。

まあ vite が使う型定義ということなのかな?

package.json を覗くと preview というスクリプトがあって vite preview を実行してくれる。 起動してみて、 localhost:4173 を見るも 404 が返ってくる。これは一体?

ChatGPT氏によると

vite preview は、Vite プロジェクトを本番環境で動作させずに、ビルドされたアプリケーションをプレビューするためのコマンドです。通常、本番> ビルドを行う前に、ビルドされたアプリケーションをローカルで確認したい場合に使用します。

以下は、一般的な使用法です:

vite preview

このコマンドは、本番ビルドの代わりに、開発サーバーから静的なアセットを提供してアプリケーションをプレビューします。本番環境に近い状態でアプリケーションを確認でき、潜在的な問題を事前に発見するのに役立ちます。

ただし、vite preview は本番環境でアプリケーションを提供するわけではなく、本番環境でのパフォーマンスやセキュリティの検証には使用しないでください。本番環境でのデプロイには、通常はビルドツールによって生成された静的なファイルを本番用のウェブサーバーにホストする方法を使用します。

とのことで npm run build したあとに npm run preview したらちゃんと閲覧できた。

create-vite は気軽に素振りするのに便利だった(なんだろうな...むかしあった Yeoman を思い出しちゃった)