修改HBuilder的livereload添加自定义响应模块

需求

• 使用HBuilder开发html模块, 图他的自动刷新, 但是自带的服务器只能访问静态资源, 不够灵活
• 使用 json-server, 前端网络工具用的ajax, 不支持POST跨域
• 配置nginx解决跨域, 本来就是图方便, 怎么还能让人点2次呢
• 之前改造过livereload, 我觉得可以再改一次

过程

• 通过比对HBuilder服务器启动前后的进程列表, 确定使用的是node.exe
• 通过命令获取所有node进程的启动命令

wmic process where caption="node.exe" get caption,commandline,ProcessId

• 找到服务器的文件为livereload.js, 后续确定是HBuilder安装目录下的livereload.js
• livereload.js(HBuilder 2.9.8.20201110)使用的express模块
• 接入的代理服务模块 proxyserver.js

/*
livereload.js 改造内容
. 用于解析POST的boyd, 在req.body中访问, 在其他调用app.use附近添加
	app.use(express.json());
. 用于拦截请求, 接入本JS进行处理, 在原有的app.get前添加
	app.post('*', function(req, res) {
		var md = require('D:\\work\\proxyserver.js');
		md(req, res);
	});
. 修改checkFunc中对文件修改的判断, 排除数据地址, 否则页面会刷新
	filename.indexOf('需要排除的文件夹') == -1
*/
var http = require('http');
var url = require('url');
var path = require('path');
var fs = require('fs');
/**
 * 清除require缓存, 模拟热更新
 * @param {Object} name
 */
var clearModel = function(name) {
	if (!name) return;
	name = name.replace('/', '\\\\');
	var module = require.cache[name];
	if (module.parent) {
		module.parent.children.splice(module.parent.children.indexOf(module), 1);
	}
	delete require.cache[name];
}

/**
 * 优先使用JS模块(.js)处理, 没有JS模块的使用JSON(.json)数据,
 * 并在返回之前封装外壳
 * @param {Object} request
 * @param {Object} response
 */
module.exports = function(request, response) {
	var pathname = url.parse(request.url).pathname;
	/*
		期望的JSON文件,
		这里的的路径需要配合项目中实际使用的网络访问工具进行调整
		假设你的HBuilder中有2个项目, 一个WebApp, 一个WebApi,
		WebApp需要访问 ip:port/WebApi/auth/login, 那么WebApi的结构为
		WebApi > auth > login.js
	*/
	var jsonFile = path.join(__dirname, '../', pathname) + '.json';
	// 期望的JS模块文件
	var jsFile = path.join(__dirname, '../', pathname) + '.js';

	// 统一格式
	var respData = {
		"success": true,
		"message": "访问成功.",
		"data": {}
	}

	if (fs.existsSync(jsFile)) { // 判断是否存在JS模块
		// 引入JS模块并调用
		var md = require(jsFile);
		try {
			respData.data = md(request, response);
		} catch (e) {
			respData.success = false;
			respData.message = e.message ? e.message : e;
			console.log(e);
		}
		// 清除引入的模块
		clearModel(jsFile);
	} else if (fs.existsSync(jsonFile)) { // 判断是否存在JSON文件
		// 读取文件内容并响应
		var data = fs.readFileSync(jsonFile, 'utf-8');
		try {
			respData.data = JSON.parse(data);
		} catch (e) {
			respData.success = false;
			respData.message = e.message ? e.message : e;
			console.log(e);
		}
	} else {
		// 其他情况, 响应错误信息
		respData.success = false;
		respData.message = '未找到对应的处理路径.';
	}
	// 发送数据
	response.json(respData)
}

• 具体服务的模块
  • demo.js

/**
 * 示例
 * express 文档 https://www.expressjs.com.cn/4x/api.html
 * 首选访问 demo.js, 如果没有则访问demo.json, 否则返回false
 * 数据发送
 * 	res.json 响应json
 *  res.jsonp 响应跨域
 *  res.send 发送文件或者发送json对象
 * @param {Object} req
 * @param {Object} res
 */
module.exports = function(req, res) {
	if (req.body.type == 1) {// 直接响应json
		return {
			messag: 'this type is js'
		};
	} else if (req.body.type == 2) {
		// 引入其他json文件, 如果使用require加载json, 修改后不会自动刷新
		var data = require('fs').readFileSync(__dirname+'/demo.json', 'utf-8');
		return JSON.parse(data);
	} else { // 响应字符串
		return './demo.json';
	}
}

• demo.json

{
	"messag": "this type is json"
}

• 开发过程中, 因为不知道怎么看livereload.js的输出, 而且服务启动之后没找到停止服务的按钮, 只能暂时通过关闭HBuilder来实现关闭, 所以通过自建一个服务器测试, 没问题后再放入livereload.js中, 代码如下

// 直接引入安装目录下的express
var express=require('HBuilderX安装目录\\plugins\\nodeserver\\node_modules\\express\\index.js');

// 构建 服务器
var app = express();
// 解析 POST 发送的 body, 在req.body中访问
app.use(express.json())

// 仅接受POST请求
app.post('*', function(req, res) {
	// 调用自定义的服务模块, 内部会调用其他模块
	var md = require('D:\\work\\proxyserver.js');
	md(req, res);
});
// 监听 8489端口, 可自定义
app.listen(8489, function(){
	console.log('running on 84889')
})