最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Webpack 實(shí)現(xiàn) Node.js 代碼熱替換

 更新時(shí)間:2015年10月22日 09:43:39   投稿:hebedich  
Webpack有一個(gè)很實(shí)用的功能叫做熱替換(Hot-replace),尤其是結(jié)合React Hot Loader插件,開(kāi)發(fā)過(guò)程中都不需要刷新瀏覽器,任何前端代碼的更改都會(huì)實(shí)時(shí)的在瀏覽器中表現(xiàn)出來(lái)。

這兩天為了這個(gè)問(wèn)題, Gitter 上問(wèn), Twitter 上問(wèn), GitHub 上問(wèn), 兩天沒(méi)反應(yīng)
原來(lái)寫(xiě)博客的 jlongster 不理我, 我也不知道 Webpack 作者的聯(lián)系方式
最后在 Gitter 上發(fā)的消息他似乎看到了, 就粗略地解釋了一遍, 醍醐灌頂啊...
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 怎么配置和腳本怎么運(yùn)行
我寫(xiě)了一遍, 代碼僅僅是這么短, 熱替換就實(shí)現(xiàn)了:
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?1000' # <-- 輪詢更新內(nèi)容的代碼
  './src/main' # <-- 項(xiàng)目入口
 ]
 target: 'node' # <-- 指明編譯方式為 node
 output:
  path: 'build/'
  filename: 'bundle.js' # <-- 編譯結(jié)果的文件名
 module:
  loaders: [
   {test: /\.coffee/, loader: 'coffee'}
  ]
 plugins: [
  new webpack.HotModuleReplacementPlugin() # <-- 照常啟動(dòng) hot mode
 ]
 resolve:
  extensions: ['.js', '', '.coffee']

命令行環(huán)境運(yùn)行的話, 注意是 webpack 而不是 webpack-dev-server
注意后臺(tái)運(yùn)行的 & 只是為了不阻塞, 你有兩個(gè)終端就開(kāi)兩個(gè)吧

npm i
webpack --watch & # <-- watch 模式
node build/bundle.js # <-- 運(yùn)行的是打包結(jié)果的代碼

我寫(xiě)了兩個(gè)測(cè)試文件, 一個(gè)是會(huì)修改的代碼 src/lib.coffee:

exports.data = 'code 5'

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

另一個(gè)入口文件 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()

跑一跑 Demo, 就知道效果怎么樣了, setInterval 不受替換的干擾
而在 build/ 目錄, 每次修改都會(huì)生成一個(gè) JSON 文件記錄修改的內(nèi)容:

復(fù)制代碼 代碼如下:
➤➤ l build/
0.1dadeb2eb7b01e150126.hot-update.js  0.c1d0d73de39660806d0c.hot-update.js  2849b61a15d31ffe5e08.hot-update.json  0.99ea3ea7633f6b3750e6.hot-update.js  0.eaa7b323eba37ae58997.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

具體的文件內(nèi)容也就是這樣, 大致可以認(rèn)為包含了識(shí)別更新所需的信息:

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

/***/ }
};

其他方案

白天在網(wǎng)上查找方案, 順便在論壇上發(fā)了個(gè)帖子問(wèn)這個(gè)事情,現(xiàn)成的主要兩個(gè)說(shuō)明比較清楚的方案, 值得借鑒一下

一個(gè)是百度的技術(shù)博客上, 寫(xiě)的大概是怎么對(duì) module 對(duì)象做處理,也就是手工監(jiān)聽(tīng)文件修改, 然后清楚模塊緩存, 重新掛載模塊
思路清晰考慮細(xì)致, 雖然有點(diǎn)冗余代碼, 還是可以一試:
http://www.fzitv.net/article/73739.htm

另一個(gè)似乎是對(duì) require.extensions 做了 hack, 增加了操作和事件,當(dāng)模塊文件更新時(shí), 對(duì)應(yīng)模塊自動(dòng)更新, 并且 emit 一個(gè)事件,通過(guò)這樣的效果, 模塊引用的位置可以做一些處理, 使用新的代碼,這個(gè)應(yīng)該說(shuō)還是比較粗暴的, 畢竟不是所有的代碼都容易替換
https://github.com/rlidwka/node-hotswap

感想

考慮到我已經(jīng)在 Webpack 這棵樹(shù)上吊死, 也就不打算深入研究了,也許 Node.js 官方對(duì) lib/module.js 做下優(yōu)化能搞出不錯(cuò)的功能來(lái),然而, JavaScript 畢竟不是不可變數(shù)據(jù)使用成風(fēng)的社區(qū), 比不了 Erlang,因?yàn)榇a替換就涉及到狀態(tài)更新的問(wèn)題, 不好搞, 不如重啟來(lái)得省事,而重啟現(xiàn)在有 node-dev supervisor nodemon 三套方案任你選

對(duì)我來(lái)說(shuō), 主要是 Cumulo 方案對(duì) WebSocket 存在巨大的依賴,現(xiàn)在前端開(kāi)發(fā)已經(jīng)能做到服務(wù)器上更新代碼, 客戶端自動(dòng)更新了,
通過(guò) Webpack 和 React 的機(jī)制, 局部更新 DOM 和純函數(shù)模塊,如果說(shuō)能夠做到開(kāi)發(fā)環(huán)境也能熱替換, 這對(duì)于開(kāi)發(fā)效率的提升就太大了,本來(lái)覺(jué)得熱替換遙不可及的, 然而很可能是觸手可及的效率提升!

后面大概還有坑, 畢竟黑科技... 遇到再說(shuō)了

有興趣可以細(xì)看下 jlongster 寫(xiě)的相關(guān)的幾篇神作, 非常有幫助:
http://jlongster.com/archive

相關(guān)文章

  • node.js實(shí)現(xiàn)簡(jiǎn)單的壓縮/解壓縮功能示例

    node.js實(shí)現(xiàn)簡(jiǎn)單的壓縮/解壓縮功能示例

    這篇文章主要介紹了node.js實(shí)現(xiàn)簡(jiǎn)單的壓縮/解壓縮功能,結(jié)合實(shí)例形式分析了node.js實(shí)現(xiàn)本地文件與服務(wù)器端壓縮/解壓縮相關(guān)操作技巧,需要的朋友可以參考下
    2019-11-11
  • nodejs中實(shí)現(xiàn)修改用戶路由功能

    nodejs中實(shí)現(xiàn)修改用戶路由功能

    這篇文章主要介紹了nodejs中實(shí)現(xiàn)修改用戶路由功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2019-05-05
  • 搭建一個(gè)Koa后端項(xiàng)目腳手架的方法步驟

    搭建一個(gè)Koa后端項(xiàng)目腳手架的方法步驟

    這篇文章主要介紹了搭建一個(gè)Koa后端項(xiàng)目腳手架的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • node.js的exports、module.exports與ES6的export、export default深入詳解

    node.js的exports、module.exports與ES6的export、export default深入詳解

    這篇文章主要給大家介紹了關(guān)于node.js中的exports、module.exports與ES6中的export、export default到時(shí)是什么的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-10-10
  • nodejs 提示‘xxx’ 不是內(nèi)部或外部命令解決方法

    nodejs 提示‘xxx’ 不是內(nèi)部或外部命令解決方法

    本文介紹了node.js包管理工具npm安裝模塊后,無(wú)法通過(guò)命令行執(zhí)行命令,提示‘xxx’ 不是內(nèi)部或外部命令的解決方法,給需要的小伙伴參考下。
    2014-11-11
  • Node.js如何對(duì)SQLite的async/await封裝詳解

    Node.js如何對(duì)SQLite的async/await封裝詳解

    這篇文章主要給大家介紹了關(guān)于Node.js如何對(duì)SQLite的async/await進(jìn)行封裝的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-02-02
  • NodeJS后端開(kāi)發(fā)操作文件之讀寫(xiě)文件

    NodeJS后端開(kāi)發(fā)操作文件之讀寫(xiě)文件

    這篇文章主要介紹了NodeJS后端開(kāi)發(fā)操作文件之讀寫(xiě)文件,操作文件是服務(wù)端一個(gè)基礎(chǔ)的功能,也是做后端開(kāi)發(fā)的必備能力之一,操作文件主要包括讀和寫(xiě)。而這些功能NodeJS都已經(jīng)提供了對(duì)應(yīng)的方法
    2022-06-06
  • Node.js中使用socket創(chuàng)建私聊和公聊聊天室

    Node.js中使用socket創(chuàng)建私聊和公聊聊天室

    這篇文章主要介紹了Node.js中使用socket創(chuàng)建私聊和公聊聊天室的相關(guān)資料,需要的朋友可以參考下
    2015-11-11
  • Node.JS 循環(huán)遞歸復(fù)制文件夾目錄及其子文件夾下的所有文件

    Node.JS 循環(huán)遞歸復(fù)制文件夾目錄及其子文件夾下的所有文件

    在Node.js中,要實(shí)現(xiàn)目錄文件夾的循環(huán)遞歸復(fù)制也非常簡(jiǎn)單,使用fs模塊即可,僅需幾行,而且性能也不錯(cuò),我們先來(lái)實(shí)現(xiàn)文件的復(fù)制,需要的朋友可以參考下
    2017-09-09
  • Node.js之構(gòu)建WebSocket服務(wù)全過(guò)程

    Node.js之構(gòu)建WebSocket服務(wù)全過(guò)程

    這篇文章主要介紹了Node.js之構(gòu)建WebSocket服務(wù)全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-09-09

最新評(píng)論

邮箱| 都兰县| 泗水县| 佳木斯市| 乌拉特前旗| 剑川县| 南充市| 新营市| 如皋市| 岳阳市| 嘉义县| 沁水县| 嵊泗县| 普格县| 余庆县| 囊谦县| 灵武市| 安西县| 黔南| 凤山市| 集安市| 乾安县| 黑山县| 乐安县| 海丰县| 沙洋县| 东阿县| 芜湖市| 勃利县| 大化| 五指山市| 石首市| 嫩江县| 古浪县| 永平县| 樟树市| 清河县| 双桥区| 万年县| 邯郸市| 南阳市|