Webpack は Node.js コードのホット リプレースメントを実装します_node.js

過去 2 日間、Gitter、Twitter、GitHub でこの問題について質問しましたが、2 日間返答がありませんでした
ブロガーの jlong​​ster が私を無視したことが判明し、Webpack
の作者の連絡先情報を知りませんでした。 Gitterに最後に投稿されたメッセージを見ていたようで、ざっくりと説明していただきました、とても分かりやすかったです…
https://github.com/webpack/docs/issues/45#issuecomment-149793458

Here is the process in short:

Compile the server code with webpack
Use target: "node" or target: "async-node"
Enabled HMR via --hot or HotModuleReplacementPlugin
Use webpack/hot/poll or webpack/hot/signal
The first polls the fs for updates (easy to use)
The second listens for a process event to check for updates (you need a way to send the signal)
Run the bundle with node.
You can't use existing HMR loaders like react-hot-loader or style-loader because they make no sense in a server environment. Just add manuall replacement code at the correct location (i. e. accept request handler like in the example)

You can't use the webpack-dev-server. It's a server which serves assets not a runner. Just run webpack --watch and node bundle.js. I would go the webpack/hot/poll?1000 route first. It's pretty easy to use and suitable for dev environments. For production (if you want to hot update your production server) the signal approach is better suited.

元の単語は翻訳されません。理解した後、重要なのは Webpack の設定方法とスクリプトの実行方法です。
もう一度書きましたが、コードは非常に短く、ホットリプレースメントが実装されています:
https://github.com/jiyinyiyong/webpack-backend-HMR-demo
コードは jlong​​ster の設定チュートリアルからコピーできます:
http://jlong​​ster.com/Backend-Apps-with-Webpack--Part-II

webpack = require 'webpack'

module.exports =
 entry: [
  'webpack/hot/poll&#63;1000' # <-- 轮询更新内容的代码
  './src/main' # <-- 项目入口
 ]
 target: 'node' # <-- 指明编译方式为 node
 output:
  path: 'build/'
  filename: 'bundle.js' # <-- 编译结果的文件名
 module:
  loaders: [
   {test: /\.coffee/, loader: 'coffee'}
  ]
 plugins: [
  new webpack.HotModuleReplacementPlugin() # <-- 照常启动 hot mode
 ]
 resolve:
  extensions: ['.js', '', '.coffee']

コマンドライン環境で実行している場合は、webpack-dev-server ではなく webpack であることに注意してください
ブロックを避けるために、バックグラウンドで実行されている & に注意してください。端末が 2 つある場合は、2 つの

を開くだけです。

npm i
webpack --watch & # <-- watch 模式
node build/bundle.js # <-- 运行的是打包结果的代码

2 つのテスト ファイルを作成しました。1 つは変更されたコード src/lib.coffee:

exports.data = 'code 5'

exports.printSelf = ->
 console.log 'doing 3'

別のエントリ ファイル src/main.coffee には、モジュールの置換を処理するコードが含まれています。

lib = require './lib'

console.log lib.data
lib.printSelf()

counter = 0
setInterval ->
 counter += 1
 console.log counter
, 2000

if module.hot
 module.hot.accept './lib', ->
  lib = require './lib'

  console.log lib.data
  lib.printSelf()

デモを実行すると、setInterval が置換の影響を受けないことがわかります。
build/ ディレクトリでは、各変更により、変更されたコンテンツを記録するための JSON ファイルが生成されます:

コードをコピー コードは次のとおりです:

➤➤ l build/
0.1dadeb2eb7b01e150126.hot-update.js 0.c1d0d73de39660806d0c.hot-update.js 2849b61a15d31ffe5e08.hot-update.json 0.99ea3ea7633f6b3750e6.hot-update.js 0.ea 7b323eba37ae58997.hot-update.js 9b4a5ad617ec1dbc48a3.hot-update.json fb584971920454f9ccbe .hot-update.json
0.9abf25005c61357a0ce5.hot-update.js 0.fb584971920454f9ccbe.hot-update.js a664b5851a99ac0865ca.hot-update.json
0.9b4a5ad617ec1dbc48a3.hot-update.js 1dadeb2eb7b01e150126.hot-update.json バンドル.js
0.a664b5851a99ac0865ca.hot-update.js 256267122c6d325755b0.hot-update.json c1d0d73de39660806d0c.hot-update.json

具体的なファイルの内容は次のとおりです。これには、更新を識別するために必要な情報が含まれていると大まかに考えられます。

➤➤ cat build/0.c797c084381bfeac37f7.hot-update.js
exports.id = 0;
exports.modules = {

/***/ 3:
/***/ function(module, exports, __webpack_require__) {

  var counter, lib;
  lib = __webpack_require__(4);
  console.log(lib.data);
  lib.printSelf();
  counter = 0;
  setInterval(function() {
   counter += 1;
   return console.log(counter, 3);
  }, 2000);

  if (true) {
   module.hot.accept(4, function() {
    lib = __webpack_require__(4);
    console.log(lib.data);
    return lib.printSelf();
   });
  }

/***/ }
};

その他の予定

私は日中インターネットで解決策を探しており、この問題について質問する投稿をフォーラムに投稿しました。比較的明確な説明が記載された 2 つの主要な既存の解決策があり、それらは学ぶ価値があります。

1 つは Baidu のテクノロジー ブログにあり、おそらくモジュール オブジェクトの処理方法、つまりファイルの変更を手動で監視し、モジュール キャッシュをクリアしてモジュールを再マウントする方法が説明されています
アイデアは明確で、慎重に検討されています。コードは少し冗長ですが、試してみることができます。
http://www.jb51.net/article/73739.htm

もう 1 つは、require.extensions のハックで、モジュール ファイルが更新されると、対応するモジュールが自動的に更新され、この効果によって参照される場所にイベントが発行されます。新しいコードを使用してモジュールを処理できますが、これは比較的粗雑であると言えます。結局のところ、すべてのコードを置き換えるのは簡単ではありません
https://github.com/rlidwka/node-hotswap

感想

私はすでに Webpack ツリーに夢中になっているので、詳しく調べるつもりはありません。おそらく、Node.js は、良い機能を得るために lib/module.js を公式に最適化していますが、JavaScript はそのようなコミュニティではありません。不変データの使用は Erlang とは比較にならないほど一般的です。コードの置換にはステータス更新の問題が含まれますが、これは実行が困難です。再起動は簡単で、再起動には次の 3 つのオプションが選択できるようになりました。

私にとっての主な理由は、Cumulo ソリューションが WebSocket に大きく依存しているため、フロントエンド開発がサーバー上のコードを更新し、クライアントが自動的に更新できるようになったことです。
Webpack や React の仕組みにより、DOM や純関数モジュールも部分的に更新され、開発環境もホットリプレースできるようになれば、開発効率が大幅に向上します。かなりの可能性があります!

結局のところ、ブラックテクノロジーの背後には落とし穴があるかもしれません...遭遇したら教えてください

ご興味がございましたら、jlong​​ster によって書かれたいくつかの関連する傑作を詳しくご覧ください。これらは非常に役立ちます。
http://jlong​​ster.com/archive