1. ホーム /
  2. Vite

Vite

  • 2022.11.10

Vite で自動ビルドしたい – build に –watch オプションをつける

皆さまこんにちは、ウチイダです。

React とともに、firebase を本格的に触り始めています。

React + firebase で開発速度を上げて、小規模の開発を効率化できないかな～と試行錯誤しています。

firebase の エミュレータがとても充実しているということを最近知りました。便利です。

今回はその中で調べたことをメモしておきます。

firebase hosting のエミュレータが修正を反映しない

ソースコードを修正して、hosting エミュレータのURLを開いても変更が反映されません。

よくよく考えれば当たり前なんですけど、「hosting のエミュレータ」なので、ビルド済みの静的ファイルを読み込んでいるんですよね。

hosting のエミュレータで修正内容を反映するには、ソースコード修正後は一度ビルドしてデプロイ用のファイルも更新しないといけません。

Vite でローカル環境を動かしていたので、つい忘れていました。

Vite のビルドを自動で実行する

とはいえ、毎回手動でビルドのコマンドを実行するのは面倒です…

ソースコードを修正して保存したら、自動でビルドを実行してもらいたいです。

というわけで結論から。以下のコマンドで、Vite(の内部で動いてるRollup)を、watch モードで実行することができます。

$ npx vite build --watch
vite v3.2.2 building for production...

watching for file changes...

build started...
✓ 974 modules transformed.
# ... 省略 ...
built in 7582ms.

公式サイトには言及が少ないですが、

vite build --watch で rollup のウォッチャを有効にすることができます。

本番環境用のビルド | Vite

と書いてありました。

https://ja.vitejs.dev/guide/build.html#ファイル変更時のリビルド

Vite コマンドのヘルプにも、オプションの一覧に載っていました。

$ npx vite build --help
vite/3.2.2

Usage:
  $ vite build [root]

Options:
# ... 省略 ...
  -w, --watch                   [boolean] rebuilds when modules have changed on disk 
  -c, --config <file>           [string] use specified config file 
  --base <path>                 [string] public base path (default: /) 
  -l, --logLevel <level>        [string] info | warn | error | silent 
  --clearScreen                 [boolean] allow/disable clear screen when logging 
  -d, --debug [feat]            [string | boolean] show debug logs 
  -f, --filter <filter>         [string] filter debug logs 
  -m, --mode <mode>             [string] set env mode 
  -h, --help                    Display this message

npm script にも、build:watch として 登録しておきました。

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "build:watch": "vite build --watch",
    "preview": "vite preview"
  },
}

まとめ

ビルド処理には少し時間かかってしまいますが、毎回手でコマンド実行するよりははるかにいいですね。

基本的にはHMRが使えるVite サーバ上で作業して、hosting エミュレータ上で動作確認・微調整をする際にwatch モードで自動ビルドさせようと思います。

以上です。あなたのお役に立てれば幸いです。

  • 2022.11.10

Vite で作ったアプリで環境変数を扱いたい – .env にVITE_をつけて記述する

皆様こんにちは、ウチイダです。

ここしばらくReact をキャッチアップしています。

数年前にすこしだけやってみたときは全くできなかったのですが、Vue とかAngular 挟んだら雰囲気がわかるようになりました。

その間にReact 自体も理解しやすくなってきてるのかなと思います。

hooks使わないコードとか、クラスコンポーネントのライフタイムサイクルとかはいまでもよくわからないです。以前はもっと難しかったんだろうな…

さて、今回はViteで環境変数を使う場合のTipsです。

vite における環境変数の取り扱い

  • vite は、デフォルトでvite.config.ts と同じ階層にある.env ファイルのうち、VITE_ から始まる環境変数を読み込みされる
  • 読み込みするファイルのディレクトリは、vite.config.ts のenvDir プロパティで設定できる
  • アプリケーション内からこの環境変数を利用する場合は、import.meta.env. と記述する
  • process.env からは利用できないので注意！
# 以下の変数はVite で読み込みされ、参照できる
VITE_VAR_TEST='this is available'

# VITE_ で始まらない変数は読み込みされない
UNAVAILABLE_VAR_IN_VITE='this is unable'

参考

わかりやすい日本語でバッチリ公式ドキュメントに書いてあります。

Vite の公式ドキュメントはわかりやすいのでおすすめ、が最も有益なTipsだったかもしれません。

以上です。あなたのお役に立てればうれしいです。