Node.js × TypeScript × nodemonでホットリロード対応の環境構築
1. プロジェクトの作成
mkdir <PROJECT_NAME>
cd <PROJECT_NAME>
npm init
entry point: (index.js) dist/index.js
色々問われるがentry point
だけはdist/index.js
を指定し、それ以外の項目は任意の値を入力する。
2. ライブラリのインストール
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の作成
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の監視を開始
mkdir src
touch src/index.ts
まずサンプルファイルを作成しておく。
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.tsconsole.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ファイルが生成される。