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 相关文章推荐
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
vue实现文件上传功能
Aug 13 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
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
人大复印资料处理程序_补充篇
2006/10/09 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
python练习程序批量修改文件名
2014/01/16 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
语文教育专业推荐信范文
2013/11/25 职场文书
教师个人自我鉴定
2014/02/08 职场文书
水电站项目建议书
2014/05/12 职场文书
发布会邀请函
2015/01/31 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
Android中View.post和Handler.post的关系
2022/06/05 Java/Android
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL