Webpack 实现 Node.js 代码热替换
作者:hebedich 发布时间:2024-05-13 10:04:14
这两天为了这个问题, 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://www.aspxhome.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
猜你喜欢
- 问题当浏览SQL Server 2008的新特性时,我们看到了透明数据加密。这看起来很有趣。您能为我们解释一下并介绍下执行它的细节吗?专家解
- Pycharm运行时总是跳出Python Console最近运行程序的时候发现,每次点击运行之后,都是出现的Python Console。最
- 其实要将MSSQL数据库的数据导出为.sql格式的文件很简单,微软的SQL Server 2008已经拥有了这一功能具体可以查看这篇文章。今
- 本文先抓取网络上的表情图像,然后利用百度 AI 识别表情包上的说明文字,并利用表情文字重命名文件,这样当发表情包时,不需要逐个打开查找,直接
- 在PC端登录公司的后台管理系统或在手机上登录某个APP时,经常会发现登录成功后,返回参数中会包含token,它的值为一段较长的字符串,而后续
- ASP访问数据库的方式有哪些?在ASP中可以通过三种方式访问数据库:1、IDC(Internet Database Connec
- 一、什么要备份数据库 ?在现实IT世界里,我们使用的服务器硬件可能因为使用时间过长,而发生故障;Windows系列服务器有可能蓝屏或者感染病
- 写入:1:把gif图像文件读入内存(一个变量strTemp)。2:写入数据库。Dim binTmp() As ByteDim conn As
- 下表列出 SQL Server 查询分析器提供的所有键盘快捷方式。活动 快捷方式 书签:清除所有书签。 CTRL-SHIFT-F2
- 参考文档 https://cli.vuejs.org/zh/1.安装npm install -g @vue/cli2.检查安装vue -V
- 问题描述在spring-boot启动时,希望能执行相应的sql文件来初始化数据库。使用配置文件初始化数据库可以在spring-boot的配置
- http通过StreamingHttpResponse完成连续的数据传输长链接问题http服务之间传递结果流一个由flask封装起来的算法,
- 本文实例解析Python SqlAlchemy的使用方法,分享给大家供大家参考,具体内容如下1.初始化连接from sqlalchemy i
- 我就废话不多说了,大家还是直接看代码吧!#加载keras模块from __future__ import print_functionimp
- 名片管理系统一、思路1、定义名片操作选项2、把增加的名片信息存储到字典中3、所有名片信息存储到列表4、对于误操作给出提示二、用到的知识点1、
- 本文实例讲述了php通过获取头信息判断图片类型的方法。分享给大家供大家参考。具体实现方法如下:$filename = '617.gi
- 下面就先定义一个函数: def foo(): print('function') foo() 在上述代码中,定义了一个名为f
- window.onresize = baiduResizeDiv; window.onerror = function(){} var di
- 本文实例为大家分享了python点球小游戏的具体代码,供大家参考,具体内容如下1.游戏要求: 设置球的方向:左中右三个方向,射门或者扑救动作
- 1、用户有三种:活跃用户、沉睡用户、外部用户。2、据不完全统计,外部用户8亿,沉睡用户1.2亿,活跃用户1千万。3、就算不去管活跃用户,或者