1

webpack-dev-server を使用してホット モジュール置換の最小限の実例を作成しようとしています。基本的に、webpack を使用しbundle.jsて、ブラウザーによって呼び出される HTML ページに読み込まれて実行されるいくつかのモジュール モジュールを含むファイルを準備したいと考えています。

moduleAホットスワップ可能にしたいモジュールの例は次のとおりです。

'use strict'
var myA = function(){ return 'a'; }
module.exports = myA;
if (module.hot) { module.hot.accept(); }

そして、それを使用するメインモジュール（ホットスワップする予定はありません）があります：

'use strict'
var myA = require('./moduleA');
var myB = require('./moduleB');
function clickMe() { alert(myA() + myB() + "-test"); }
document.getElementById('theButton').onclick = clickMe;
if (module.hot) {
  module.hot.accept('./moduleA', function() { myA = require('./moduleA');});
  module.hot.accept('./moduleB', function() { myB = require('./moduleB');});
}

たとえば、によって返される値を変更するmyAと、ボタンのアラート テキストが変更されることが予想されます。実際、コンソールには HRM サーバーとランタイムの間のすべてのメッセージが表示されますが、ボタンをクリックすると古いアラート値が表示されます。

メイン モジュールのホット スワップ ハンドラがスワップされたときに実行されないことを確認しmoduleAました。ある種のホットスワップイベントがrequireのチェーンをバブルアップすることは理解しましたが、明らかに私の場合はそうではありません。

残念ながら、周りのほとんどの 例 は複雑すぎるか、JS ベースではないか、何らかの理由で私が期待したものとは異なる動作をしています。

私の基本的な質問は、単純なモジュールを変更して本当にホットスワップ可能にする方法を誰か教えてもらえますか? .

全体像を知りたい人のために、ここにコードがあります

4

0 に答える 0