【ホットリロード】nodejs + TypeScriptでサーバーサイドを開発している時に、コードを編集したら自動リロードさせる。
TypeScript+node.jsでサーバーサイドを開発してる時に、煩わしいこと
- TypeScriptをjavascriptへコンパイルすること。
- ソースコードを編集したい場合、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