🛸 TypeScriptでHot Reloadしつつデバッグもしたい！

したさすぎるけど既存のBoilerplateはよくわからない！そんじゃ1から学んでいこうかというところで一本作ったので、そこまでに調べたことをつららんっと！大まかにはpackage.jsonの中身を調べた話です。

🔎 package.jsonは怖くない！

一見するとパッケージの依存関係やらライセンス、バージョン情報などががつらつら書いてあるのはわかるものの、scriptのところは呪文のようになっていてよくわかりません！

しかし冷静に読んでみると非常に単純です。

npm run cmdのcmd部分に対応するコマンドが列挙してあるだけです。つまりショートカット。

以下に一例を示します。

• startの実体はnpm run serveで、serveの実体はnode dist/server.jsなので、実質的にnpm run startはnode dist/server.jsと同義です。ね？怖くないでしょ？

"scripts":{"start":"npm run serve","serve":"node dist/server.js",}

📜 今回の要件を満たすscript

ぶっちゃけmicrosoft / TypeScript-Node-Starterほぼそのままですが、簡単に意味合いを説明します。

• debug
  • buildしてwatch-debugします。要するに開発用です。
  • devの方が馴染みあるのですがこれはデバッグ用ということでdevelopmentとはまた違うなということで、MS Wayに則りました。
  • prodやdevは必要に応じて生やせばいいと思います。
• build
  • build-tsしてlintします。要するにTSをJSにビルドし、Lintをかけます。
• serve
  • buildしたJSを起動します。
• lint
  • Lintするやつです。
• build-ts
  • tscが走りJSが生えます。
• watch-ts
  • tsc -wが走り、TSファイルの変更を検知してくれます。細かいことはwww.typescriptlang.orgへ。
• watch-node
  • nodemonがビルドしたJSを監視し、変更があれば再起動してくれます。
• watch-debug
  • concurrentlyを利用してwatch-tsとserve-debugを並列実行します。
  • オプション説明(英語力低いので上のリンク辿ったほうが正確です)
  • -k：実行中のプロセスがどれか一つでも死んだら全部殺す
  • -p：プロセスログを吐くときのプレフィクスフォーマット
  • -n：プロセスログのプレフィクス名（配列）
  • -c：プロセスログのプレフィクスカラー（配列）
  • 一番最後：コマンド（-n, -cの配列に対応）
• serve-debug
  • nodemonがビルドしたJSをinspectモードで監視し、変更があれば再起動してくれます。
  • こうしておくとnodemonがport:9229でwsを垂れ流してくれるので、VSCodeからinspectorプロトコルを使ってアタッチすることができるようになります。
  • ポート番号の変更はnodemon --inspect=9300みたいにすればいけます

"scripts":{"debug":"npm run build && npm run watch-debug","build":"npm run build-ts && npm run lint","serve":"node dist/server.js","lint":"tsc --noEmit && eslint \"**/*.{js,ts}\" --quiet --fix","build-ts":"tsc","watch-ts":"tsc -w","watch-node":"nodemon dist/server.js","watch-debug":"concurrently -k -p \"[{name}]\" -n \"TypeScript,Node\" -c \"cyan.bold,green.bold\"\"npm run watch-ts\"\"npm run serve-debug\"","serve-debug":"nodemon --inspect dist/server.js"},

🚀 launch.json

デバッグ用のやつです。

{"version":"0.2.0","configurations":[{"type":"node","request":"attach","name":"Attach by Process","protocol":"inspector","port":9229}]}

💎 今回作ったTypeScript汎用Boilerplate

• TypeScript-Node-Starterとして公開しています。
• 本家に付いてる贅肉を削りまくり、最低限必要な要素を残したつもりです。
• 一応サンプル程度にビルドして動かせるものはつけています。