Viteの勉強メモ

今回はサクッとTypeScriptの開発環境を用意するには何がいいのかなと思って調べたところ

Vite が良いらしいという情報を得たので、じゃぁちょっと勉強してみようかなということでやってみようと思う。

そもそも Vite(ヴィート) とは？

• Viteは、フロントエンド開発のための超高速ビルドツール/開発サーバー
• 主にWebアプリケーションを作るために使用します
• Vite自体はNode.js上で動作するCLIツールなので、必ずNode.jsが必要
• 主にReactやVueなどのWebフレームワークと組み合わせて利用します

とのこと

環境構築

React+TypeScriptを利用する開発環境の構築例

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

久しぶりにNode.jsを使ったのでnpmのバージョンが古いとか言われたり
npmのバージョンをあげようとしたらそもそもNode.jsのバージョンが古いとか言われたり
そもそも俺はNode.jsのバージョン管理に何を使っていたんだったか...思い出せねぇ...と
紆余曲折あったものの、上記のコマンドですんなり環境構築、実行することが出来ました。

Reactはいらないんだよな、HTMLでjsのようにtsが使えたらなぁ...

というニーズにも応えてくれるようで、その場合は以下のコマンドで環境を構築すればいい。

npm create vite@latest my-app -- --template vanilla-ts
cd my-app
npm install
npm run dev

--template vanilla-tsを指定することで、htmlでtsが普通に使える世界に転生できる。

個人的に求めていたのはこれかもしれない、jsは好きだけど型がない、かといってtsは標準では使えないのでなんかしら環境構築が必要だからだるいなぁ。

もっとサクッっとそういう環境が作れないもんかね...というおじさんのニーズを満たしてくれる可能性を感じる

結構前からParcelとかゼロコンフィグを謳ったものはあったが(アレも良かったけど)
結構ごちゃごちゃして重かったり、長々と使っていると結局webpackにするかってなることも多かった

Viteはそんなおじさんの期待に応えられるのではないか、いやまだ使ってないからわからないが
希望を感じている。

SPAではなく昔ながらのマルチページサイトにしたい場合は？

Reactを利用するとSPA構成になるが、vanilla-tsなど、htmlでtsが使えるだけのシンプルなセットアップにした場合について

基本的なフォルダ構成、ファイル配置について

Viteはプロジェクトルート直下にhtmlファイルを置けばページとして扱われるようだ
/publicではなくプロジェクトルート、またsrc/はあくまでJS/TS/CSSなどを入れる場所とのこと

my-project/
├─ index.html         ← トップページ
├─ about.html         ← 別ページ
├─ contact.html       ← 別ページ
├─ vite.config.ts     ← 必要ならここで設定(必要に応じて自分でファイルを作る)
├─ src/
│   ├─ main.ts
│   ├─ about.ts
│   └─ contact.ts
├─ public/
├─ tsconfig.json
└─ package.json

これでnpm run devを実行すればサーバーが立ち上がりURLを指定すれば各ページにアクセスができる。

また開発時は特に問題ないが、ビルドをする場合は設定に追加が必要になる。

npm run buildでビルドを実行した場合、デフォルトではindex.htmlしかビルドされないので、about.htmlなど追加ページがあればvite.config.tsを作成し設定を追加してやる必要がある。

以下のようにすれば、npm run buildをした際に、about.htmlとconcat.htmlもビルドに含まれ、求めている結果が得られるだろう。

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        about: resolve(__dirname, 'about.html'),
        contact: resolve(__dirname, 'contact.html'),
      },
    },
  },
});

ちなみにvite.config.tsはデフォルトでは存在しない。

それはViteがゼロコンフィグを重視しているからだろう。

私自身も設定がだるいと思っているからこういうViteのようなツールを探すわけだが、そう思うと早速邪道を歩み始めたなという気はしなくもない。

話を元に戻す。

また、このファイルを作成するとおそらくpathなんてないぞと、型定義が見つからないというエラーが出るはずだ。

これはViteがブラウザ向けのプログラムを書くのが主であり、Node.jsの型情報などは含まれていないためである。

なのでimportしたviteとかpathに関する型情報が必要であれば自分で入れる必要がある。

結論をいえば以下のコマンドを実行すれば解決だ。

nom install -D vite @type/node

HMRが効かない

最近ではおなじみのHMR、ソースコード変更したらブラウザに変更が勝手に反映される。
古の時代を生きたおじさんからすると便利な時代になったものだと思うが
ソースコードを変更してからF5を推すまでが一連の動作として体に染みつきすぎており
HMRで変更されてるのにF5を押して「あっ...」となるおじさんも大量にいたであろう。

話を元に戻す。

vanilla-tsを指定してプロジェクトを作るとデフォルトだとHMRは動作しない。

正直そこまで不便は感じないが、HMRがないとダメだと言う軟弱モノはHMRを使いたいファイル内に以下のソースコードを記載する必要がある。

if (import.meta.hot) {
  import.meta.hot.accept();
}

また処理によってはこの方法ではうまくHMRが動作しないこともある、その時はHMRの仕組みを理解していれば自己解決できるだろう。

それにわざわざこんなレガシー環境を欲しがる人は素直にF5でいいだろとも思う。

まとめ

数行のコマンドでjsさながらにtsが使える開発環境が用意されるというのは実にありがたいことである

どのプログラムの歴史もだんだんとビルド工程が複雑になり、makefileとかいろいろ
ビルドプロセスを組む時代を経て、テンプレかされるという一途をたどり安定する

webの世界もだんだんとそうなってきているのだろうか
無職だからこれが実用に耐えうるのかどうかしらないが、個人的な用途としては
充分満たされるレベルに整ってきている

「あぁ、ブラウザで最初からtsが使えたらいいのに」という願いはほぼ叶ったに等しいレベルへ到達していると感じる。

そして思う、次はブラウザで最初からテンプレートエンジンが使えたらいいのに...と