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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
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 GD绘制24小时柱状图
2008/06/28 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
PHP错误处理函数
2016/04/03 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
angularjs实现猜数字大小功能
2020/05/20 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
python选择排序算法实例总结
2015/07/01 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
Python实现FM算法解析
2019/06/18 Python
简单了解python列表和元组的区别
2020/05/14 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
研究生自荐信
2013/10/09 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
秋季运动会广播稿
2014/02/22 职场文书
论文诚信承诺书
2014/05/23 职场文书
班级标语大全
2014/06/21 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书