個人サイト https://ohbarye.github.io/ のビルドツールをwebpackからViteに移行した。
まぁ、移行と大げさに言っても、元々vanilla JSとSassでちょっと動きと装飾を付けただけのペライチページなのだけど。
実質ただのリンク集
理由
State of JS 2021のビルドツール部門でViteが1位になっていたが利用したことがなく気になっていたため。手元にある最小のフロントエンドプロジェクトが個人サイトだったのでplaygroundとして試してみた。
https://2021.stateofjs.com/en-US/libraries/build-tools より
Viteとは
Vite公式を斜め読みした。ランキング中だと経験あるビルドツールがwebpack, Parcel, Rollupあたりで止まっていたのでそこからの差分で理解すると...
- esbuildというGo製の爆速ビルドツールが生まれた
- でもまだproduction向けにbundleする機能は安定しておらず、webpackとかRollupのほうが成熟してる
- Viteはesbuildを開発用に使い、production向けのbundleにはRollupを使う
- esbuildを使ってdependenciesをpre-bundleしたり、HMR提供して開発体験を最高にする
- 2つのツールの併用になるが、Viteはconfig周りの複雑さを吸収してデフォルトだとzero configで動く
という感じか。
移行手順
プロジェクトの外側でyarn create viteを試してみてどんなファイルが生成されるかを一通り眺める。vanilla JSとTypeScriptを選んだ場合は数ファイル程度だったのですぐに理解できた。
生成されたファイルやpackage.json内のnpm scriptやdependenciesを元々のプロジェクトにコピペする。
index.htmlがあるディレクトリをrootとし、相対パスで指定したファイルが依存ツリーに勝手に追加されていく。yarn devで起動し、おかしいところがあれば直す。今回はsassのインストールと、相対パスの置換ミスぐらい。
感想
2つのツールをラップしてると聞くと「結局開発者が両方知らないといけないやつでは...？」身構えてしまう。
ただ、https://ohbarye.github.io/のようにちょろっとTypeScriptやSassでサイト作りたい程度であればconfig知識ほぼ不要でセットアップできたし、このあたりはParcelの初出の頃を思い出した。
一部ビルドに工夫*1が必要なところも、Viteのconfigからrollupにオプションを渡すぐらいのことは問題なくできた。configオブジェクトに型が付いているのはとても良い。mis configurationを避けられる。
開発時のビルド速度の向上はやはりある程度以上の規模がないと恩恵がわからないので、業務のアプリケーションでもそのうち試してみたい。
