【Vite】vite.config.tsについて
はじめに
以前、Phaserでちょっと何か作ってみたいなと思って開発環境を作っていたのですが、
vite.config.ts作成時に『？？？』となってしまいました。
そのときのことをまとめた記事がこちらにあるのですが、今回の記事はそれと同じものです。
今後は技術ブログをZennで書いていこうかなと思い、このViteの記事を最初の記事に選択しました。
オリジナルの記事をのせていたのは私の独自ドメインのサブドメインで、10本も記事がない弱小ブログサイトなんです。
その割にViteの記事の累計View数は800ほどいっていて、割と需要があるのかも？と思ったことが、この記事をZennの最初の記事にしたきっかけです。
この記事について
私は、今までにハッカソンやインターンシップでWebサイトを作成したことはあるのですが、リリースまでやったことがなかったというのもあり、ビルドツールについてちゃんと調べたことがありませんでした。
『コマンド実行して、ローカルでサイトが立ち上がって挙動が確認出来たらOK！』みたいな感じで、設定をどうでも良いと思っていたというよりは、そもそも気にしていなかった。
従って、この記事での内容は 『ビルドツールのconfigファイルって何してるの…？』 ってところから始まっています。ビルドツール使ったことあるけどViteで躓いちゃった～ってところがスタートではないので、Vite特有の話とかはできないと思います。
私の疑問と、調べて得た理解
私が何をどう調べていったのかについて下に書いていくのですが、
私がvite.config.ts作成時に『？？？』となったのは何についてで、それは何だった(と私が理解している)のかについてまとめてしまおうと思います。
疑問内容
- defineConfigって何…？
- defineConfigを書かなくてもできるみたいだけど、書いた時と書かないときとで何が違うの？
import { defineConfig } from "vite";
export default 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の開発環境ができたら何か楽しいものを作りたいなと思ってはじめたことなんです。
独自ドメインのサブドメインにこのブログを投稿した後、Phaserでちょっと動くものを作りはしたのですが、どこにもアウトプットしてなかったな...。
この春から25卒の社会人になってしまったので、あんまり自由時間がないのですが、いつかPhaserで楽しいものを作りたいです。でも自由時間は趣味のお絵描きに使いがちなので、いつになるかは不明です。
Discussion