场景重现。前几天接了个私活，主要是修改一些前端页面样式，优化html结构。css/js的导入方式是umd（UniversalModuleDefinition），即直接用script/link导入。而不是amd/cmd/commonjs对应requirejs/seajs/webpack加载javascript或样式。在不断修改样式->刷新页面的循环中，浪费了很多时间！于是就出来了：“为热更新服务造轮子”。注意：本工具仅支持热更新。umd引入的依赖原理如图所示。首先需要建立一个http(s)服务来获取前端静态资源。对于HTML文件请求，服务器需要插入一个额外的客户端脚本。脚本的工作主要是用来建立websocket长连接。同时需要开启文件监听，异步监听文件的变化，并向依赖文件的客户端广播reload消息。客户端收到消息后会自动刷新页面location.reload()特性热更新远程调试（适用于局域网中央移动端调试）文件查看访问：http://localhost:8082/__hrs__/文件依赖查看单文件访问：`http://localhost:8082/index.html.hrs.map`{"/Users/moyu/my-code/JavaCode/dike/js/jquery-1.9.1.js":"../../js/jquery-1.9.1.js","/Users/moyu/my-code/JavaCode/dike/js/bootstrap.js":"../../js/bootstrap.js","/Users/moyu/my-code/JavaCode/dike/js/navbar.js":"../../js/navbar.js","/Users/moyu/my-code/JavaCode/dike/css/font-awesome.min.css":"../../css/font-awesome.min.css","/Users/moyu/my-code/JavaCode/dike/css/navbar.css":"../../css/navbar.css","/Users/moyu/my-code/JavaCode/dike/css/conceptModel.css":"../../css/conceptModel.css","/users/moyu/my-code/JavaCode/dike/css/dropzone/dropzone.css":"../../css/dropzone/dropzone.css"}全局访问：`http://localhost:8082/__hrs__/map`转发请求（避免跨域）访问：http://localhost:8082/__hrs__/forward?url=http://blog.moyuyc.xyz/head.jpg配置文件默认配置文件为：hrs.config.js比如：module.exports={proxy:{"/api":{target:"http://www.huya.com/longdd",},"/php":{redirect:true,//default:truetarget:"http://localhost:63343/start/static",//"http://localhost:6999",changeHost:true,//default:truehot:true,//热重载使能够？默认值：false//Function/RegExp：如果为空，将设置根配置hotRulehotRule:function(filename,request){//console.log(request.url);返回/\.(php)$/.test(文件名);},//函数：返回本地文件路径mapLocal:function(request){//request:ExpressRequestObject//console.log('mapLocal',request.originalUrl,request.baseUrl,request.url);consturl=request.url.replace(/\?[\s\S]*/,'')return"/Users/moyu/my-code/phpCode/start/static"+url;},//Function/String:返回检测到的目录路径mapRoot:function(request){//request:ExpressRequestObjectreturn"/Users/moyu/my-code/phpCode/start/static";}},},//正则表达式或函数(文件名){...}hotRule:/\.(html|htm)$/,//默认值:/\.(html|htm)$/setUp:function(app){/*app是一个快速服务器对象。*///http://localhost:8082/testapp.get('/test',function(req,res){res.end("TEST!");});}};跨域建立hotreloadserver（8082端口）服务后，手动插入hrs-local文件hrs的绝对路径-root需要监控的文件夹路径（默认为hrs-local的文件夹路径，示例中：/Users/moyu/fe-code/a/b）安装使用Nodejs实现需要node环境npminstall-gsimple-hot-reload-serverUsage:hrs[-pport]pathOptions:-v--version获取当前版本。-p--port设置服务器端口。（默认值：8082）-c--config配置路径。(默认hrs.config.js)-h--help如何使用。最后，欢迎各位star！
