Cloud Functions + TypeScriptでHot Reloadを行うためのちょっとしたTips

Gakuです。
firebaseのCloud FunctionsをTypeScriptで記述すると、HotReloadがかからない現象に陥ったので、無理くりHotReloadを行う方法を記載したいと思います。

なんでCloud FunctionsをTypeScriptで記述するとHotReloadできないの？

JavaScriptでfunctionsを記述すれば何も設定せずとも、HotReloadが可能です。
ですが、TypeScriptだとJavaScriptへのトランスパイルを行う必要があり、デフォルトの設定ではshellコマンドの起動時の一度だけbuildをする設定になっているのでHotReloadがかからないというのが原因になります。

解決方法

package.jsonにwatchコマンドを追加します。

package.json

"scripts": {
    "lint": "tslint --project tsconfig.json",
    "build": "tsc",
    "watch": "yarn build --watch", // これを追記
    "serve": "npm run build && firebase serve --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
},

あとは、terminalを2つ立ち上げて、一つを「yarn watch」で自動ビルドを行うようにします。
もう一方のterminalで「yarn shell」を立ち上げれば、HotReloadの感覚でデバックをすることが可能です。

おわりに

ちょっとしたTipsですが、開発が結構快適になるのでお試しあれ。
あと、terminalを複数立ち上げるのが面倒なので、「yarn shell」単体でHotReloadとかできる方法とかあればな～。
知っている方いましたら、コメントいただけると嬉しいです！

それでは　(/・ω・)/