NestJSはnest newしたあとにnest start:devするだけで、ホットリロードする開発環境を整えることができます。しかし、これはファイルの変更を監視し、変更が検知されたら再度ビルドしているだけなので、プロジェクトが大規模になるとTypeScriptのビルドの処理が重くなります。
そこで、WebpackのHMR(Hot-Module Replacement)を利用すると、変更のあったモジュールだけを入れ替えることができるので、大きなプロジェクトでもホットリロードの時間を大幅に短縮することができます。
この記事は、ほとんど公式ドキュメントの意訳です。
ドキュメント : https://docs.nestjs.com/recipes/hot-reload
ライセンス : https://github.com/nestjs/docs.nestjs.com/blob/master/LICENSE
注意
- Yarn v2(berry)を使用している場合は、そのままでは動きません。上記リンクより公式ドキュメントをご確認ください。
- 公式ドキュメントでは、Nest CLIを利用しない方法も紹介されていますが、この記事ではNest CLIを利用する方法のみご紹介します。
Nest CLIにはWebpackが含まれているので、WebpackのHotModuleReplacementPluginが使えます。
インストール
必要なパッケージをインストールします。
$ npm i --save-dev webpack-node-externals run-script-webpack-plugin webpack
設定ファイル
アプリケーションのルートディレクトリにwebpack-hmr.config.jsを作って、以下を書き込みます。
const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');
module.exports = function (options, webpack) {
return {
...options,
entry: ['webpack/hot/poll?100', options.entry],
externals: [
nodeExternals({
allowlist: ['webpack/hot/poll?100'],
}),
],
plugins: [
...options.plugins,
new webpack.HotModuleReplacementPlugin(),
new webpack.WatchIgnorePlugin({
paths: [/\.js$/, /\.d\.ts$/],
}),
new RunScriptWebpackPlugin({ name: options.output.filename }),
],
};
};
デフォルトのWebpack設定と、Nest CLIから渡されるWebpackパッケージの参照を引数に取ります。そして、HotModuleReplacementPlugin、WatchIgnorePlugin、RunScriptWebpackPluginプラグインでWebpackの設定を書き換えて返します。
Hot-Module Replacement
main.tsを開いて、以下のように書き換えることでHMRを有効化できます。
declare const module: any;
async function bootstrap() {
const app = await NestFactory.create(AppModule);
await app.listen(3000);
if (module.hot) {
module.hot.accept();
module.hot.dispose(() => app.close());
}
}
bootstrap();
package.jsonに以下のスクリプトを追加します。nest newした状態だと既にstart:devは存在すると思うので、start:hmrにしてもいいと思います。
"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch"
あとは、スクリプトを実行するだけです。
$ npm run start:dev
感想
私の環境だと、HMRするとファイル変更がすぐに反映されなかったりしたので、プロジェクトが大きくなるまでは通常のホットリロードを使用した方が無難かなと思いました。
また、Webpackを使用すると、ファイルパスの指定などに違いが出るようなので、HMRに移行する場合には注意が必要かもしれません。
これは私の知識不足ですが、ブラウザをオートリロードする方法がわからないです。