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

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

WBOY

リリース： 2016-05-16 15:35:37

オリジナル

1473 人が閲覧しました

過去 2 日間、Gitter、Twitter、GitHub でこの問題について質問しましたが、2 日間返答がありませんでした
ブロガーの jlongster が私を無視したことが判明し、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&#63;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
コードは jlongster の設定チュートリアルからコピーできます:
http://jlongster.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/

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

9abf25005c61357a0ce5.hot-update.js 0.fb584971920454f9ccbe.hot-update.js a664b5851a99ac0865ca.hot-update.json

9b4a5ad617ec1dbc48a3.hot-update.js 1dadeb2eb7b01e150126.hot-update.json バンドル.js

a664b5851a99ac0865ca.hot-update.js 256267122c6d325755b0.hot-update.json c1d0d73de39660806d0c.hot-update.json

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

&#10148;&#10148; 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 や純関数モジュールも部分的に更新され、開発環境もホットリプレースできるようになれば、開発効率が大幅に向上します。かなりの可能性があります!

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

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