Phaserでちょっと何か作ってみたいなと思って開発環境を作っていたのですが、vite.config.ts作成時に『？？？』となってしまいました。
そもそも、今までにハッカソンやインターンシップでWebサイトを作成したことはあるのですが、リリースまでやったことがなかったというのもあり、ビルドツールについてちゃんと調べたことがありませんでした。
『コマンド実行して、ローカルでサイトが立ち上がって挙動が確認出来たらOK！』みたいな感じで、設定をどうでも良いと思っていたというよりは、そもそも気にしていなかった。
ですので、この記事での内容は 『ビルドツールのconfigファイルって何してるの…？』 ってところから始まっています。ビルドツール使ったことあるけどViteで躓いちゃった～ってところから始まっていないので、Vite特有の話とかはできないと思います。
私の疑問と、調べて得た理解
この後、私が何をどう調べていったのかっていうのを書いていくのですが、
私がvite.config.ts作成時に『？？？』となったのは何についてで、それは何だった(と私が理解している)のかについてまとめてしまおうと思います。
疑問内容
- defineConfigって何…？
- defineConfigを書かなくてもできるみたいだけど、書いた時と書かないときとで何が違うの？
調べて得た理解
defineConfigがあることで、Viteのconfigファイルの型補完が行われる。
これを書いておくと、defineConfigに記述されたルールに従っていない設定はエラーになってくれるため、ミスに気づくことができる。自動補完もしてくれる。
defineConfigは、何か特別なものだと思っていたため変な考え方をしてしまっていましたが、React.jsでexport default XXX したときに学んだことと似たようなものでした…。
ビルドツールについての知識がないせいで、ビルドツールに関するファイルは他のJS, TSファイルとは違う何かだと思ってしまっていたみたいです。
『defineConfigを書かなくてもできるみたいだけど、書いた時と書かないときとで何が違うの？』については、書いておくと自動補完や型チェックを利用できるから、より快適に開発ができる。っていう感じでしょうか。
では、上に書いたことに気がつくまでに何を調べていったかについて、下に書いていきます。
調べていった内容
そもそもvite.config.tsが何をしているのかを理解しないと、
と思ったのでそのあたりから調べ始めました。
vite.config.tsは何をしているか
そもそもビルドツールはビルド作業を自動化してくれるやつで、そのconfigファイルにはビルド作業の手順に関する設定などを書き込むという認識でした。
しかし、どんなことが書かれるのかとか、このファイルをビルドツール側がどう使っているかとかは知らなかったので、そこを調べました。
公式ドキュメントによると、「Viteを実行すると、Viteはプロジェクトルートにあるvite.config.jsを自動的に解決しようとする」そうです。(拡張子はtsでもOK)
resolve a file を “ファイルを解決する” と訳しましたが、これであっているのでしょうか？
日本語訳がわかっても直接的に意味はわかりませんが、
「ファイルを読み込み、そこに書かれている設定を適用したビルドプロセスを開始する」
という感じかな…と。
気づき…
Vite実行時の挙動について調べたときに、vite.config.ts内でexportされるdefineConfigはビルドプロセスが始まる前にVite側で受け取られているものなのかって思ったんです。
何かに受け取ってもらうためのexportって、React.jsを使っていた時に書いたexport defaultに似ているな～とか考えて、『あれ、似ているっていうか、そういうことなのでは？』と気が付きました。
こんな感じで私の疑問点は解決したんです。
今思うと、何を疑問に思っていたんだろうっていう感じです。
vite.config.tsの書き方
vite.config.tsへの疑問がなくなり、やっと書き始めることができる状態になったため、書き方を調べました。
公式ドキュメントのここを見ると良さそうです。
共通オプション、サーバーオプション、ビルドオプション、プレビューオプションなど、やろうと思えばめちゃくちゃカスタムできそうですね。
私はとりあえず共通オプションのrootだけ設定しておこうかなと思います。
フォルダ構成を考えたいので、多分rootの位置も変わるかなと。
おわりに
Viteのvite.config.tsについての疑問から始まって、ビルドツールについて少し調べたことについてまとめた記事でした。
もともとPhaserの開発環境を作っていたのがきっかけでしたが、Phaserの開発環境ができたら何か楽しいものを作りたいなと思っています。それについても記事を書く予定です。
コメント