Webpack 实现 Node.js 代码热替换


Posted in Javascript onOctober 22, 2015

这两天为了这个问题, Gitter 上问, Twitter 上问, GitHub 上问, 两天没反应
原来写博客的 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?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?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 而不是 webpack-dev-server
注意后台运行的 & 只是为了不阻塞, 你有两个终端就开两个吧

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

我写了两个测试文件, 一个是会修改的代码 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()

跑一跑 Demo, 就知道效果怎么样了, 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.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

具体的文件内容也就是这样, 大致可以认为包含了识别更新所需的信息:

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

/***/ }
};

其他方案

白天在网上查找方案, 顺便在论坛上发了个帖子问这个事情,现成的主要两个说明比较清楚的方案, 值得借鉴一下

一个是百度的技术博客上, 写的大概是怎么对 module 对象做处理,也就是手工监听文件修改, 然后清楚模块缓存, 重新挂载模块
思路清晰考虑细致, 虽然有点冗余代码, 还是可以一试:
https://3water.com/article/73739.htm

另一个似乎是对 require.extensions 做了 hack, 增加了操作和事件,当模块文件更新时, 对应模块自动更新, 并且 emit 一个事件,通过这样的效果, 模块引用的位置可以做一些处理, 使用新的代码,这个应该说还是比较粗暴的, 毕竟不是所有的代码都容易替换
https://github.com/rlidwka/node-hotswap

感想

考虑到我已经在 Webpack 这棵树上吊死, 也就不打算深入研究了,也许 Node.js 官方对 lib/module.js 做下优化能搞出不错的功能来,然而, JavaScript 毕竟不是不可变数据使用成风的社区, 比不了 Erlang,因为代码替换就涉及到状态更新的问题, 不好搞, 不如重启来得省事,而重启现在有 node-dev supervisor nodemon 三套方案任你选

对我来说, 主要是 Cumulo 方案对 WebSocket 存在巨大的依赖,现在前端开发已经能做到服务器上更新代码, 客户端自动更新了,
通过 Webpack 和 React 的机制, 局部更新 DOM 和纯函数模块,如果说能够做到开发环境也能热替换, 这对于开发效率的提升就太大了,本来觉得热替换遥不可及的, 然而很可能是触手可及的效率提升!

后面大概还有坑, 毕竟黑科技... 遇到再说了

有兴趣可以细看下 jlongster 写的相关的几篇神作, 非常有帮助:
http://jlongster.com/archive

Javascript 相关文章推荐
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 #Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 #Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 #Javascript
JavaScript中Boolean对象的属性解析
Oct 21 #Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 #Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 #Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 #Javascript
You might like
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
python判断字符串是否包含子字符串的方法
2015/03/24 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Python 必须了解的5种高级特征
2020/09/10 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
香港交友网站:be2香港
2018/07/22 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
实体的生命周期
2013/08/31 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
社区学习十八大感想
2014/01/22 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
司法所长先进事迹
2014/06/02 职场文书
项目负责人任命书
2014/06/04 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
业余无线电通联Q语
2022/02/18 无线电