Webpack implementiert den Node.js-Code hot replacement_node.js

In den letzten zwei Tagen habe ich auf Gitter, Twitter und GitHub nach diesem Problem gefragt, aber zwei Tage lang kam keine Antwort
Es stellte sich heraus, dass der Blogger jlongster mich ignorierte und ich die Kontaktinformationen des Autors von Webpack
nicht kannte Er schien die letzte auf Gitter gepostete Nachricht gesehen zu haben, also erklärte er sie grob. Sie war so aufschlussreich...
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.

Die Originalwörter werden nicht übersetzt. Nach dem Verständnis geht es vor allem darum, wie man Webpack konfiguriert und das Skript ausführt
Ich habe es noch einmal geschrieben. Der Code ist nur so kurz und der Hot-Ersatz ist implementiert:
https://github.com/jiyinyiyong/webpack-backend-HMR-demo
Der Code kann aus dem Konfigurations-Tutorial von jlongster kopiert werden:
http://jlongster.com/Backend-Apps-with-Webpack--Part-II

webpack = require 'webpack'

module.exports =
 entry: [
  'webpack/hot/poll?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']

Bei Ausführung in einer Befehlszeilenumgebung beachten Sie bitte, dass es sich um Webpack und nicht um Webpack-Dev-Server handelt
Achten Sie darauf, dass & im Hintergrund läuft, um Blockierungen zu vermeiden. Wenn Sie zwei Terminals haben, öffnen Sie einfach zwei

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

Ich habe zwei Testdateien geschrieben, eine davon ist der geänderte Code src/lib.coffee:

exports.data = 'code 5'

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

Eine weitere Eintragsdatei src/main.coffee enthält Code für den Modulaustausch:

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()

Führen Sie die Demo aus und Sie werden wissen, dass die Auswirkung von setInterval nicht von der Ersetzung betroffen ist.
Im Verzeichnis build/ wird bei jeder Änderung eine JSON-Datei generiert, um den geänderten Inhalt aufzuzeichnen:

Code kopieren Der Code lautet wie folgt:

➤➤ l build/
0.1dadeb2eb7b01e150126.hot-update.js 0.c1d0d73de39660806d0c.hot-update.js 2849b61a15d31ffe5e08.hot-update.json 0.99ea3ea7633f6b3750e6.hot-update.js 0.ea 3eba37ae58997.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 bundle.js
0.a664b5851a99ac0865ca.hot-update.js 256267122c6d325755b0.hot-update.json c1d0d73de39660806d0c.hot-update.json

Der spezifische Dateiinhalt sieht wie folgt aus, wobei grob davon ausgegangen werden kann, dass er die Informationen enthält, die zum Identifizieren von Aktualisierungen erforderlich sind:

➤➤ 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();
   });
  }

/***/ }
};

Andere Pläne

Ich habe tagsüber im Internet nach Lösungen gesucht und im Forum einen Beitrag zu diesem Thema gepostet. Es gibt zwei Hauptlösungen mit relativ klaren Erklärungen, von denen es sich lohnt, zu lernen

Eine davon befindet sich im Technologieblog von Baidu, in dem wahrscheinlich beschrieben wird, wie Modulobjekte verarbeitet werden, d. h. Dateiänderungen manuell überwacht, dann der Modulcache geleert und das Modul erneut bereitgestellt wird
Die Ideen sind klar und sorgfältig durchdacht. Obwohl der Code etwas überflüssig ist, können Sie es trotzdem versuchen:
http://www.jb51.net/article/73739.htm

Der andere scheint ein Hack für require.extensions zu sein, der Vorgänge und Ereignisse hinzufügt. Wenn die Moduldatei aktualisiert wird, wird das entsprechende Modul automatisch aktualisiert und ein Ereignis ausgegeben Modul kann mit neuem Code verarbeitet werden, dies sollte als relativ grob bezeichnet werden, schließlich sind nicht alle Codes einfach zu ersetzen
https://github.com/rlidwka/node-hotswap

Impressionen

Angesichts der Tatsache, dass ich mich bereits mit dem Webpack-Baum beschäftigt habe, habe ich nicht vor, ihn eingehend zu studieren. Vielleicht optimiert Node.js offiziell lib/module.js, um gute Funktionen zu erhalten Die Verwendung unveränderlicher Daten ist beliebt und kann nicht mit Erlang verglichen werden, da das Ersetzen des Codes das Problem der Statusaktualisierung mit sich bringt. Der Neustart ist einfacher, und beim Neustart stehen Ihnen jetzt drei Optionen zur Auswahl: Node-Dev Supervisor Nodemon

Für mich liegt der Hauptgrund darin, dass die Cumulo-Lösung stark von WebSocket abhängig ist. Jetzt kann die Front-End-Entwicklung den Code auf dem Server aktualisieren und der Client aktualisiert sich automatisch,
Durch die Mechanismen von Webpack und React werden DOM und reine Funktionsmodule teilweise aktualisiert. Wenn die Entwicklungsumgebung auch im laufenden Betrieb ersetzt werden kann, wird dies die Entwicklungseffizienz erheblich verbessern. Ich dachte ursprünglich, dass ein Hot-Replacement unerreichbar ist Sehr gut möglich. Es ist eine Effizienzsteigerung in greifbarer Nähe!

Möglicherweise stecken hinter der schwarzen Technologie auch Fallstricke ... Ich werde es Ihnen sagen, wenn Sie darauf stoßen

Wenn Sie interessiert sind, können Sie sich mehrere verwandte Meisterwerke von Jlongster genauer ansehen, die sehr hilfreich sind:
http://jlongster.com/archive