Eleventy 3.0 热重载中的循环引用问题分析与解决方案

在 Eleventy 3.0 版本中，开发者在使用 .11ty.js 文件时可能会遇到一个特殊的热重载问题。当开发者修改并保存 .11ty.js 文件后，控制台会抛出"Converting circular structure to JSON"错误，导致热重载功能失效。

这个问题的根源在于 Eleventy 的模板对象结构中存在循环引用。具体来说，当 Eleventy 处理 .11ty.js 文件时，会创建一个包含 rawInput 属性的模板对象。这个 rawInput 属性又通过 page 属性反向引用了自身，形成了一个循环引用结构：obj.build.templates[0].rawInput.page.rawInput。

在开发模式下，Eleventy 需要将这些模板信息序列化为 JSON 格式并通过 WebSocket 发送给浏览器端以实现热重载。然而，JavaScript 的 JSON.stringify() 方法无法处理这种循环引用结构，因此抛出了错误。

Eleventy 核心团队在收到问题报告后，迅速定位了问题所在。他们发现虽然 rawInput 是一个有用的特性（它包含了模板的原始输入信息），但在热重载的场景下其实并不需要这些信息。因此，解决方案是在将数据发送给开发服务器之前，从对象中移除 rawInput 属性。

这个修复方案既保留了 rawInput 的核心功能，又解决了热重载的问题，体现了良好的工程权衡。该修复已经包含在 Eleventy 3.0.1-alpha.6 版本中。

对于开发者来说，这个问题的解决意味着：

1. 使用 .11ty.js 文件时可以获得流畅的热重载体验
2. 不需要修改现有代码或配置
3. 保持了 Eleventy 的核心功能完整性

这个问题也提醒我们，在现代前端工具链中，循环引用是一个需要特别注意的设计模式。工具开发者需要仔细考虑哪些数据需要跨进程/环境传递，以及如何优雅地处理复杂的数据结构。Eleventy 团队的这个解决方案为我们提供了一个很好的参考案例。