あなたがノードを目標としているJSまたはTSを書くならば、あなたの日常生活とあなたの生産性を改善したいです🎉 この記事はあなたです!

TLR

DEVSとして、我々の日常生活はしばしば前後に一定である.

コードを書く

ランニングユニット試験

実際のコードを実行する

あなたは、この反復プロセスが十分に速く、書き込みとテストの間にこの即座のフィードバックループを持つことができるとき、それがどれくらいうれしいかに気がついたかもしれません.
この記事では、Webpack HMRを活用して、どのようなコードベースサイズであっても、あなたのNodeJSサーバとMOCHAユニットテストのためのインスタント再起動/リロード/ランを取得する方法を説明します.
私が話していることを垣間見ることができるclone this repo そして、「開発」命令に従ってください.

HMRとは何であり、どのように役に立つことができますか？

あなたのプロジェクトが十分に大きいならば、あなたは多分痛い遅れを経験します.行のコードを保存するときは、(少なくとも秒単位で)

あなたのユニットテストをリロードして

この行のコードをテストするために、localhostサーバーを再起動します.

これはどちらの場合でも、あなたの全てのコードベースはノードによって再解釈されなければならない(そして、おそらくTSノードでtypescriptを使用するならば、再配布されるかもしれません).これは、コードの変更された単一の行の変更と再実行を行うコードです.
それはHMR(Hot module reload)が便利になるところです.
私はそれの詳細(Googleはあなたの友人)の詳細に入るが、2つの単語では、アイデアは、あなたのサーバーを実行しておくと、コードファイルを保存するときに変更されたモジュールを再読み込みするだけです.必要はありませんあなたのlocalhostを再起動するには、もはや簡単な変更を書く.

きちんとした。どのように、私はHMRをセットアップしますか？

Webpackはこれを行う良い方法です.
これは、しばしばクライアント側のdevtoolとしてWebアプリをバンドルするために見られるが、それはまた、バンドルnodejsアプリに使用することができます.
要するに、あなたはあなたのNodeJSサーバーのセットアップWebpackする必要がありますHMRを有効にします.これを行うには、私はあなたを指すことができますthis sample repo . Webpack HMR +単体テストを使用して簡単なタイプスクリプト+ Expressサーバーを設定する方法を示します.
サーバーコードを変更するときに、コード行を変更するとどうなりますか

変更されたファイルを再読み込みしますmain.ts ), しかし、すべての依存関係はすでにメモリにある.何百もの依存関係、および何千ものコードファイルを持っているならば、あなたの新しいサーバーは上がっていて、このメソッドを使用して速くwaaaayを走らせます.
ブラックマジックを理解するには、次のようにします.

webpack.config.js

の終わりmain.ts

.vscode/launch.json

WebPackドキュメントabout HMR

それは複雑ではありませんが、HMRが純粋な魔法ではないという事実に気づいてください.それがどのようにフードの後ろで働くかを理解しようとします、そして、あなたはその制約を弱めるでしょう(再ロードされていないモジュールがHMR再コンパイルの間で永続される記憶状態で静的であるかもしれないという事実に起因しています).

また、私のユニットテストを再度高速にしてください

NodeJSプロジェクトを開発することに真剣であるならば、あなたはおそらく単位テストを書きます.
VSCodeをIDEとして使用し、Mochaを単体テストフレームワークとして使用する場合は、mocha test explorer + mocha
その場合、あなたは幸運です🎉 それはとても起こるI forked the official mocha test adapter あなたのユニットテストにHMRサポートをもたらす.
私たちは私の会社で1年間それを使用している、それは非常によく動作し、安定している-問題を書くことを躊躇しないでくださいhere 何か問題があれば.
それは、打撃の間の遅れをbrungしました▶ ユニットテストのボタンと実際にAを押す🔴 20秒から0.5秒までのブレークポイント🤯.
ここでは1000単位のテストを実行する方法を示します.

またはデバッグするには

... そして、良いニュースがあります:あなたのコードベースの数百万の行、依存関係の何千ものを持っていても、それは高速です❤

設定する

あなたが注意深く読むならばthe aforementioned sample repository , また、HMR準備単位のテスト構成を定義することに気づいたかもしれません.
要するに、

単純な単体テストエントリポイントファイルを作成します.

このエントリファイルを使用するWebpackバンドルの作成

HCHA束としてBulit束を使用するためのモカ試験アダプターの指示via .vscode/config.js

Webpackバンドル(NPMの起動)を実行し、すべてのテストを再読み込み

このレポの指示を読んでください、それは箱の外で働くべきです!

ヒントはまだあなたの反復ループの経験を改善する

テストを実行するには、かなり速くする必要があります.
しかし、あなたはまだ🐜 ボタン、▶ テストを実行するたびに.それは全く面倒であることがわかった.
これを解決するために、私の前の記事の精神で

再びあなたのマウスに決して触れない方法🐭

オリビエギバル・ 月18日・ 3分読む

#productivity #vscode

コマンドを使うことを勧めますtest-explorer.rerun , test-explorer.reload , test-explorer.redebug and test-explorer.run-this-test .
以下に私のキーバインドを示します.

    {
        "key": "ctrl+f5",
        "command": "test-explorer.rerun"
    },
    {
        "key": "ctrl+shift+f5",
        "command": "test-explorer.reload"
    },
    {
        "key": "ctrl+alt+f5",
        "command": "test-explorer.redebug"
    },
    {
        "key": "alt+shift+f5",
        "command": "test-explorer.run-this-test"
    },