aknow2

自分の興味のある事を連々と(プログラミング、モバイルアプリ、プログラミング教育)

【ホットリロード】nodejs + TypeScriptでサーバーサイドを開発している時に、コードを編集したら自動リロードさせる。

TypeScript+node.jsでサーバーサイドを開発してる時に、煩わしいこと

  1. TypeScriptをjavascriptコンパイルすること。
  2. ソースコードを編集したい場合、node.jsのプロセスを立ち上げなおす必要があること。

この二つの問題を問題を解決していきたいと思います。

追記: ボイラープレート作りました。設定面倒な人はこっちで試してみて下さい。
Node.js向けのTypescriptのボイラープレートを作った - aknow2

問題1 Typescirptからjavascriptへ変換

ts-nodeを利用。
ts-nodeとは、TypeScriptをnode上で実行してくれるREPLです。
そして、使い方も簡単です。

インストール方法
npm install -g ts-node
実行方法
ts-node ./src/index.ts  // 今回はsrcフォルダ下にあるindex.tsファイルを起動すると仮定

ts-nodeを利用するだけで、javascriptに変換する煩わしさが消えました。素晴らしい!
次!

問題2 ソースコード編集後のnode.js再起動

nodemonを利用する!
nodemonを使うとコード編集を自動で検知し、node.jsのプロセスも立ち上げ直してくれます。

インストール方法
npm install -g nodemon

これでターミナルでnodemon hoge.jsと実行すれば良いだけなのですが、、、
デフォルトの設定ではJavascriptのファイル(.js)しか検知してくれません。
TypeScriptの場合は少し手を入れる必要があります。

プロジェクトフォルダ直下にnodemon.jsonを作成し、
以下のように記述します。

{
    "watch": ["src"],   // 監視対象とするフォルダを指定
    "ext": "ts",    // 拡張子.tsを指定する
    "exec": "ts-node ./src/index.ts"  // nodemonを起動したら実行されるスクリプト
}

あとはターミナルでnodemonを実行するだけ

nodemon

これでTypeScriptからJavascriptへの変換、
node.jsの再起動の二つの煩わしさから解放されます!

お次はデバッグする方法です!
次の記事をご覧ください。

「デバッグ編」nodejs + TypeScriptでサーバーサイドを開発している時に、コードを編集したら自動リロードさせて、デバッグ。 - aknow2

参考

ts-node https://github.com/TypeStrong/ts-node

nodemon
https://github.com/remy/nodemon#config-files https://github.com/remy/nodemon/blob/master/doc/sample-nodemon.md

[PR]

https://play.google.com/store/apps/developer?id=Aknow2Gamesplay.google.com