Webpack melaksanakan kod Node.js hot replacement_node.js

Sejak dua hari lalu, saya telah bertanya tentang isu ini di Gitter, Twitter dan GitHub, tetapi tiada jawapan selama dua hari
Ternyata blogger jlongster mengabaikan saya, dan saya tidak mengetahui maklumat hubungan pengarang Webpack
Dia nampaknya telah melihat mesej terakhir yang disiarkan di Gitter, jadi dia menerangkannya secara kasarnya...
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.

Perkataan asal tidak akan diterjemahkan Selepas memahami, perkara utama ialah cara mengkonfigurasi Webpack dan cara menjalankan skrip
Saya menulisnya sekali lagi Kod ini hanya begitu pendek, dan penggantian panas dilaksanakan:
https://github.com/jiyinyiyong/webpack-backend-HMR-demo
Kod boleh disalin daripada tutorial konfigurasi jlongster:
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']

Jika dijalankan dalam persekitaran baris arahan, sila ambil perhatian bahawa ia adalah webpack dan bukannya webpack-dev-server
Beri perhatian kepada & berjalan di latar belakang hanya untuk mengelakkan sekatan Jika anda mempunyai dua terminal, buka dua

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

Saya menulis dua fail ujian, satu ialah kod src/lib.coffee yang diubah suai:

exports.data = 'code 5'

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

Fail kemasukan lain src/main.coffee mengandungi kod untuk mengendalikan penggantian modul:

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

Jalankan demo dan anda akan tahu kesannya setInterval tidak dipengaruhi oleh penggantian
Dalam binaan/ direktori, setiap pengubahsuaian akan menjana fail JSON untuk merekodkan kandungan yang diubah suai:

Salin kod Kod adalah seperti berikut:

➤➤ l binaan/
0.1dadeb2eb7b01e150126.hot-update.js 0.c1d0d73de39660806d0c.hot-update.js 2849b61a15d31ffe5e08.hot-update.json 0.99ea3ea3633f6b6b 37ae58997.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

Kandungan fail khusus adalah seperti ini, yang boleh dianggap secara kasar mengandungi maklumat yang diperlukan untuk mengenal pasti kemas kini:

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

/***/ }
};

Pelan lain

Saya sedang mencari penyelesaian di Internet pada siang hari, dan menyiarkan siaran di forum yang bertanya tentang perkara ini. Terdapat dua penyelesaian sedia ada utama dengan penjelasan yang agak jelas, yang patut dipelajari daripada

Satunya ada di blog teknologi Baidu, yang mungkin menerangkan cara memproses objek modul, iaitu, memantau pengubahsuaian fail secara manual, kemudian kosongkan cache modul dan pasang semula modul
Ideanya jelas dan dipertimbangkan dengan teliti Walaupun kodnya agak berlebihan, anda masih boleh mencubanya:
http://www.jb51.net/article/73739.htm

Yang satu lagi nampaknya adalah penggodaman pada require.extensions, menambah operasi dan acara Apabila fail modul dikemas kini, modul yang sepadan dikemas kini secara automatik dan acara dipancarkan melalui kesan ini, lokasi yang dirujuk oleh modul boleh diproses , menggunakan kod baru, ini harus dikatakan agak kasar, lagipun, tidak semua kod mudah diganti
https://github.com/rlidwka/node-hotswap

Tera

Memandangkan saya telah menggantung diri saya pada pokok Webpack, saya tidak bercadang untuk mengkajinya secara mendalam Mungkin Node.js secara rasmi mengoptimumkan lib/module.js untuk mendapatkan fungsi yang baik penggunaan data tidak berubah adalah popular tidak boleh dibandingkan dengan Erlang, kerana penggantian kod melibatkan masalah kemas kini status, yang sukar dilakukan Ia lebih mudah untuk dimulakan semula, dan mulakan semula kini mempunyai tiga pilihan untuk anda pilih: nodemon penyelia node-dev.

Bagi saya, sebab utama ialah penyelesaian Cumulo mempunyai pergantungan yang besar pada WebSocket Kini pembangunan bahagian hadapan boleh mengemas kini kod pada pelayan dan pelanggan mengemas kini secara automatik,
Melalui mekanisme Webpack dan React, DOM dan modul fungsi tulen dikemas kini sebahagiannya Jika persekitaran pembangunan juga boleh digantikan secara panas, ini akan meningkatkan kecekapan pembangunan pada asalnya, saya fikir penggantian panas tidak dapat dicapai sangat mungkin. Ini adalah peningkatan kecekapan dalam jangkauan!

Mungkin terdapat perangkap di sebalik, lagipun, teknologi hitam... Saya akan memberitahu anda apabila anda menghadapinya

Jika anda berminat, anda boleh melihat lebih dekat beberapa karya berkaitan yang ditulis oleh jlongster, yang sangat membantu:
http://jlongster.com/archive