wangjia
99 lines
3.6 KiB
JavaScript
99 lines
3.6 KiB
JavaScript
// 零依赖本地热重载静态服务器
|
|
// 用法: node serve.mjs [port] 默认 5180
|
|
import http from 'node:http';
|
|
import fs from 'node:fs';
|
|
import path from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
|
|
const ROOT = path.dirname(fileURLToPath(import.meta.url));
|
|
const PORT = Number(process.argv[2]) || 5180;
|
|
|
|
const MIME = {
|
|
'.html': 'text/html; charset=utf-8',
|
|
'.css': 'text/css; charset=utf-8',
|
|
'.js': 'text/javascript; charset=utf-8',
|
|
'.mjs': 'text/javascript; charset=utf-8',
|
|
'.json': 'application/json; charset=utf-8',
|
|
'.svg': 'image/svg+xml',
|
|
'.png': 'image/png',
|
|
'.jpg': 'image/jpeg',
|
|
'.woff2': 'font/woff2',
|
|
};
|
|
|
|
// 热重载改短轮询（2026-07-10）：原 SSE 每个 tab 一条常驻连接，Chrome 同域
|
|
// HTTP/1.1 上限 6 条——开到第 7 个原型 tab 连接池耗尽整站卡死。轮询即用即断，无上限。
|
|
let version = 0;
|
|
const RELOAD_SNIPPET = `\n<script>
|
|
(function(){ try{
|
|
var v=null;
|
|
function tick(){
|
|
fetch('/__version',{cache:'no-store'}).then(function(r){return r.json();}).then(function(j){
|
|
if(v!==null && j.v!==v){ location.reload(); return; }
|
|
v=j.v; setTimeout(tick,1500);
|
|
}).catch(function(){ setTimeout(tick,3000); });
|
|
}
|
|
tick();
|
|
}catch(e){} })();
|
|
</script>\n`;
|
|
|
|
const server = http.createServer((req, res) => {
|
|
if (req.url === '/__version' || req.url === '/__reload') {
|
|
res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' });
|
|
res.end(JSON.stringify({ v: version }));
|
|
return;
|
|
}
|
|
|
|
let urlPath = decodeURIComponent(req.url.split('?')[0]);
|
|
if (urlPath === '/') urlPath = '/index.html';
|
|
const filePath = path.join(ROOT, urlPath);
|
|
if (!filePath.startsWith(ROOT)) { res.writeHead(403); res.end('forbidden'); return; }
|
|
|
|
fs.readFile(filePath, (err, data) => {
|
|
if (err) { res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' }); res.end('<h1>404</h1>'); return; }
|
|
const ext = path.extname(filePath).toLowerCase();
|
|
const mime = MIME[ext] || 'application/octet-stream';
|
|
const noCache = { 'Cache-Control': 'no-store, no-cache, must-revalidate', 'Pragma': 'no-cache', 'Expires': '0' };
|
|
if (ext === '.html') {
|
|
const html = data.toString('utf8').replace('</body>', RELOAD_SNIPPET + '</body>');
|
|
res.writeHead(200, { 'Content-Type': mime, ...noCache });
|
|
res.end(html);
|
|
} else {
|
|
res.writeHead(200, { 'Content-Type': mime, ...noCache });
|
|
res.end(data);
|
|
}
|
|
});
|
|
});
|
|
|
|
// 设计系统守门：启动 + 每次改动自动跑 check-ds.mjs，控制台报 PASS/FAIL
|
|
import { spawn } from 'node:child_process';
|
|
function runDsCheck() {
|
|
const p = spawn(process.execPath, [path.join(ROOT, 'tools', 'check-ds.mjs')], { cwd: ROOT });
|
|
let out = '';
|
|
p.stdout.on('data', d => out += d);
|
|
p.stderr.on('data', d => out += d);
|
|
p.on('close', code => {
|
|
const t = new Date().toLocaleTimeString();
|
|
if (code === 0) console.log(`\x1b[32m[设计系统 ✓ ${t}] screens 颜色全部走 token、变量均已定义\x1b[0m`);
|
|
else {
|
|
const m = out.match(/❶[^\n]*共 (\d+)[\s\S]*?❷[^\n]*共 (\d+)/);
|
|
const sum = m ? `硬编码颜色 ${m[1]} · 未定义 token ${m[2]}` : '存在违规';
|
|
console.log(`\x1b[31m[设计系统 ✗ ${t}] ${sum} —— 运行 node tools/check-ds.mjs 看详情\x1b[0m`);
|
|
}
|
|
});
|
|
}
|
|
|
|
let debounce;
|
|
fs.watch(ROOT, { recursive: true }, (_ev, file) => {
|
|
if (file && file.endsWith('serve.mjs')) return;
|
|
clearTimeout(debounce);
|
|
debounce = setTimeout(() => {
|
|
version++;
|
|
if (file && /\.(html|css|js)$/.test(file)) runDsCheck();
|
|
}, 80);
|
|
});
|
|
|
|
server.listen(PORT, () => {
|
|
console.log(`prototype live at http://localhost:${PORT}/ (watching ${ROOT})`);
|
|
runDsCheck();
|
|
});
|