为什么我不能保存我在 Glitch.io 的框架检查器上所做的更改答案

【问题标题】：Why can't I save changes i do on a-frame inspector in Glitch.io为什么我不能保存我在 Glitch.io 的框架检查器上所做的更改
【发布时间】：2020-04-17 16:48:11
【问题描述】：

我在 Glitch 上重新混合了一个框架 WebVR 项目。当我打开可视 a-frame 检查器并进行更改时，我无法保存更改。按 SAVE 按钮会报错：

aframe-watcher 未运行。此功能需要配套服务在本地运行。 npm install aframe-watcher 将更改保存回文件。在 supermedium.com/aframe-watcher 上阅读更多信息

我在 Glitch 上运行它，所以我没有任何本地信息。

有人可以帮忙吗？

【问题讨论】：

标签： aframe webvr glitch-framework

【解决方案1】：

inspector 无法修改服务器端的文件。使用aframe watcher 时，检查员可以在本地计算机上编辑和保存场景的更改。

【讨论】：

但是，您可以复制并粘贴他们提供的 a-entity。

【解决方案2】：

抱歉回复晚了。我无法让它在故障时使用 aframe-watcher 运行。但是使用自定义的 aframe-inspector 组件是可能的。

例如，查看https://aframe-glitch-server-sync.glitch.me/ 和https://glitch.com/~aframe-glitch-server-sync 的项目代码

您可以在public/aframe-inspector.js 中从21742 行开始看到整个场景被序列化并发送到服务器。

var scene = Toolbar._entity.getEntityClipboardRepresentation(AFRAME.scenes[0]);

var obj = {};
obj[location.pathname] = scene;
xhr.send(JSON.stringify(obj));

getEntityClipboardRepresentation 函数在21846 行提供给工具栏。我知道，这是一个丑陋的 hack，但它确实有效。

Toolbar._entity = __webpack_require__(14);

在server.js 中，服务器端处理如下所示。

app.post('/savePlain', (req, res) => {
    var before = '<html><head><script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script></head><body>';
    var after = '</body></html>';
    for (const [filepath, content] of Object.entries(req.body)) {
        fs.writeFileSync('./public' + filepath, before + content + after);
    }
    res.sendStatus(200);
});

我希望这个示例可以成为进一步实验的良好开端。 :)

【讨论】：