1. ホーム
  2. typescript

[解決済み] TypeScriptのファイル変更時にts-nodeを監視して再読み込みする方法

2022-03-16 02:40:30

質問

TypeScriptとAngularアプリケーションを搭載した開発サーバーを、tsファイルを毎回トランスパイルすることなく実行しようとしています。

私が見つけたのは できる 走る .ts のファイルを ts-node を表示させたいのですが .ts ファイルを作成し、アプリやサーバーを再読み込みします。この例として、以下のコマンドがあります。 gulp watch .

ありがとうございました。

解決方法は?

これで、簡単に npm install --save-dev ts-node nodemon を実行し nodemon を付けて .ts というファイルを作成すれば、そのまま動作します。

nodemon app.ts


以前のバージョン

私の開発環境でも同じように悩んでいたのですが、ある時、次のことに気がつきました。 nodemon のAPIでは、カスタムコマンドを実行するために、そのデフォルトの動作を変更することができます。

例えば、最新版の nodemon :

nodemon --watch "src/**" --ext "ts,json" --ignore "src/**/*.spec.ts" --exec "ts-node src/index.ts"

または nodemon.json ファイルを以下の内容で作成します。

{
  "watch": ["src"],
  "ext": "ts,json",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "ts-node ./src/index.ts"      // or "npx ts-node src/index.ts"
}

を実行し nodemon を引数無しで実行します。

これを行うことで、ライブリロードで ts-node プロセスの基本的な実装を気にする必要はありません。

乾杯


また、さらに古いバージョンでは nodemon :

nodemon --watch 'src/**/*.ts' --ignore 'src/**/*.spec.ts' --exec 'ts-node' src/index.ts

あるいは、さらに良い方法として、nodemonのコンフィグを外部化して nodemon.json を実行するだけです。 nodemon を、三道館さんのおっしゃるように

{
  "watch": ["src/**/*.ts"],
  "ignore": ["src/**/*.spec.ts"],
  "exec": "ts-node ./index.ts"
}