运行浏览器内开发服务器 [如 stackblitz/codesandbox]

Posted 2023-02-19

【中文标题】运行浏览器内开发服务器 [如 stackblitz/codesandbox]

【英文标题】：Running in-browser development server [like stackblitz/codesandbox]

【发布时间】：2019-04-18 15:51:46

【问题描述】：

问题：

如何运行实时的浏览器内开发服务器？

---

上下文

Stackblitz 和CodeSandbox 是两个提供在线IDE 来开发Web 应用程序的平台。我有一个类似的用例，需要在浏览器中运行开发服务器，但除了这些观察之外，我找不到太多东西。

---

很少观察

Stackblitz 在他们的 announcement post 中描述了他们使用 “Progressive Web App API 来在浏览器中运行实时开发服务器。”

为了解决节点依赖，stackblitz 使用他们的自定义 npm 客户端 turbo 。在github repo页面上是这样描述的

Express.js 路由用于补充 StackBlitz 上的客户端依赖项和类型定义。

还涉及一些模块捆绑程序，以支持使用热重载进行实时开发。

---

我怀疑 stackblitz 在 service worker 中运行一个 express.js 服务器，但我似乎无法理解如何。我在这里没有想法，任何帮助将不胜感激。

【参考方案1】：

老实说，我不知道，但我想大胆推测。

https://nodejs.org/api/vm.html

如果您只关注前端代码，那么我想做的就是使用所需模块的上下文来评估您的 vm 中的代码。 React 将允许您将 JS 转换为 html。您可以直接在 dom 中更新 HTML。

我不确定这有多大帮助，但我会把这个留给你

http://www.alexrothenberg.com/2012/02/29/building-a-browser-ide.html https://60devs.com/executing-js-code-with-nodes-vm-module.html

如果您有兴趣聘请贡献者，那么我将与您合作完成您的项目！

【讨论】：

我将把项目开源，一旦我这样做，我会在这里更新，非常欢迎你的贡献。至于你的回答，它没有帮助。但是我几乎找到了他们这样做的方式，很快就会发布答案。或者更好的是，一个节点包可以做到这一点。