Node.js × TypeScript × nodemonでホットリロード対応の環境構築

1. プロジェクトの作成

Terminal window
mkdir <PROJECT_NAME>
cd <PROJECT_NAME>
npm init
entry point: (index.js) dist/index.js

色々問われるがentry pointだけはdist/index.jsを指定し、それ以外の項目は任意の値を入力する。

2. ライブラリのインストール

Terminal window
npm i --save-dev typescript ts-node nodemon @types/node

3. nodemonの設定

package.json
"scripts": {
  "dev": "nodemon --watch src/**/*.ts --exec ts-node src/index.ts",
  "build": "tsc"
}

nodemon.jsonをルート配下に作成する方法もあるが、npm scriptsの情報は1箇所にまとめておきたいのでpackage.jsonに追記する。

4. tsconfig.jsonの作成

Terminal window
touch tsconfig.json
tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2021",
    "strict": true,
    "declaration": true,
    "incremental": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "removeComments": true,
    "noImplicitAny": false,
    "outDir": "dist"
  }
}

諸々俺俺ルールが入っているが、 "outDir": "dist"さえ指定できてさえいれば問題ない。

5. nodemonの監視を開始

Terminal window
mkdir src
touch src/index.ts

まずサンプルファイルを作成しておく。

Terminal window
npm run dev
[nodemon] 3.0.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src/**/*.ts
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node src/index.ts`
[nodemon] clean exit - waiting for changes before restart

6. TypeScriptのコードを編集

src/index.ts
console.log('This is a test.');

適当なコードを追記し保存する。

[nodemon] clean exit - waiting for changes before restart
[nodemon] restarting due to changes...
[nodemon] starting `ts-node src/index.ts`
This is a test.

するとnodemonが変更を検知し、index.tsの中身が無事実行された。

もしコンパイルしたい時はnpm run buildを叩くとdist下にjsファイルが生成される。

1

参考

  1. Node.js & TypeScriptのプロジェクト作成 - TypeScript Deep Dive 日本語版 ↩