npm-watch

Function Frameworks を試していたらホットリロードがサポートされていないもよう(たぶん)。調べてみると npm-watch を使った方法がヒットした。

最近はフレームワークの機能でリロードすることが多かったので、設定方法などをメモ。

npm-watch とは

nodemon を使って NPM スクリプトを開始(リロード)するツールらしい。

nodemon を直接使う場合に比べると、スクリプトとは独立して監視の設定を記述できるのでやりやすい(普通に使っていたスクリプトを転用しやすい)、と思う。

NPM スクリプト関連のツールなのでパッケージに依存関係でインストールしておくのが楽かと。

$ npm install --save-dev npm-watch

src/**/*.js の変更で start スクリプトをリロードする場合。

package.json の最上位に watch を追加
watch の中にリロードするスクリプトと同じ名前のフィールド(今回は start)を追加
- 追加したフィールドには、どのようなファイルを監視するか記述
script に npm-watch を開始するスクリプトを追加する(npx を使うなどでも対応できる)

{
  "watch":{
    "start": "src/**/*.js"
  },
  "scripts": {
    "start": "node src/index.js",
    "watch": "npm-watch"
  },
}

これで npm run watch を実行すると start スクリプトが開始されて src/ の下の *.js を監視する。監視中は nodemon が動いているようなので、rs も使える。

.ts を監視する、複数のスクリプトをリロードするなどは README の Synopsis を参照。