WebContainers 简介：在浏览器中本地运行 Node.js

WebContainers 简介：在浏览器中本地运行 Node.js

几年前，我们意识到网络正在走向一个关键的拐点。WebAssembly 和新功能 API的出现使得编写一个基于 WebAssembly 的操作系统似乎成为可能，其功能强大到足以运行 Node.js，完全在您的浏览器中。我们设想了一个比本地环境更快、更安全、更一致的卓越开发环境，无需设置本地环境即可实现无缝代码协作。

这听起来有些牵强。但是，如果网络现在为平面设计师、视频编辑和富文档编辑运行完整的环境，我们想知道：开发人员最终是否可以使用网络来构建网络？

我们决定试一试。我们期待最好的，也期待最坏的。两年后（时间过得真快），结果已经形成了意想不到的惊人结果。

今天我们很高兴地宣布WebContainers。

WebContainers 允许您创建全栈 Node.js 环境，该环境可在几毫秒内启动并立即在线和链接共享——只需单击一下。该环境加载了 VS Code 强大的编辑体验、完整的终端、npm 等。它也完全在您的浏览器中运行，这会产生一些关键的好处：

• 比您的本地环境更快。构建完成速度比 yarn/npm 快 20%，包安装完成速度 >= 5 倍。
• Node.js 在浏览器中调试。与 Chrome DevTools 的无缝集成支持本地后端调试，无需安装或扩展。
• 默认安全。所有代码执行都发生在浏览器的安全沙箱内，而不是远程虚拟机或本地二进制文件上。

同样，这些环境不在远程服务器上运行。相反，每个环境都完全包含在您的 Web 浏览器中。没错：Node.js 运行时本身首次在浏览器内本地运行。

您可以在StackBlitz.com上亲自尝试，或单击下面的启动项目之一。

截至今天发布，WebContainers 现在处于公测阶段。当前支持包括 Next.js、GraphQL 和 Vanilla Node.js，我们正在与其他开源项目合作以扩展支持。（如果您想与我们合作，请查看我们的回购协议）。

设置本地环境是一个巨大的嗡嗡声——特别是如果你想快速制作一个很酷的想法的原型，尝试一个新的开源库，创建一个错误复制或与同事合作（“嘿，你能很快在本地查看这个分支吗？ ？”）。随着 Web 开发转向像 Next.js 这样的全栈 SSR 和 SSG 工具链，这个问题比以往任何时候都更加普遍。

运行用户提交的代码以复制错误也成为开源维护者和财富 100 强公司的主要安全风险，并且这些类型的供应链攻击正在上升。

StackBlitz 通过利用数十年来内置于浏览器的速度和安全创新解决了这些问题。StackBlitz 中的所有计算都在浏览器安全沙箱内立即发生，并且无法突破到您的本地计算机。该模型还解锁了一些关键的开发和调试优势（稍后会详细介绍）。

代码空间/沙盒/Repls/...呢？

传统在线 IDE 在远程服务器上运行您的整个开发环境，并将结果通过 Internet 流式传输回您的浏览器。这种方法的问题在于，它几乎没有安全优势，并且在几乎所有方面都比本地机器提供更糟糕的体验：启动容器需要几分钟时间，容易出现网络延迟，无法离线工作，经常导致网络超时，调试冻结/损坏的容器几乎是不可能的，点击刷新只会将您重新连接到损坏的容器。

释放浏览器的力量。

使用 Chrome DevTools 无缝调试 Node.js。

事实证明，浏览器非常擅长调试 Javascript。令人震惊，我知道 通过在浏览器中执行 Node.js，与 Chrome DevTools 的集成“开箱即用”。无需安装，无需扩展，只需在浏览器中进行原生后端调试：

运行服务器。在您的浏览器中。

是的，实际上。WebContainers 包括一个映射到浏览器的 ServiceWorker API 的虚拟化 TCP 网络堆栈，使您能够按需即时创建实时 Node.js 服务器，即使您离线也能继续工作。因为它完全在浏览器安全沙箱中运行，所以服务器响应的延迟比 localhost (!) 更短，并且可以保护您的 Web 服务器免受 localhost 抓取攻击：

零足迹。以毫秒为单位启动。

浏览器执行 Javascript 和 WebAssembly 的速度非常快。我们利用这一点创建了一个不使用服务器资源的即时开发操作系统，并且不会node_modules在您的计算机上创建一个黑洞。

每次页面加载时都有一个全新的环境。

再见，rm -rf node_modules！WebContainer 内置的 npm 客户端非常快，它在每次页面加载时运行全新安装，确保您每次都获得一个干净的环境。如果您的环境确实出现问题，您可以像执行任何其他 Web 应用程序一样回到干净状态：点击刷新按钮。

零延迟。离线工作。

如果说在家工作的支点教会了我们什么，那就是经常发生网络故障。ISP 倒闭——很多。使用 StackBlitz，您可以在没有互联网连接的情况下继续工作，无论您是在火车上、飞机上，还是在雨中后座乘坐优步：

默认安全。

借助 StackBlitz 新颖的计算模型，100% 的代码执行发生在浏览器安全沙箱中。这导致比本地开发环境更快、限制更少，同时提供更高的安全性，这是一种非常罕见的组合。

事实上，默认的安全态势是如此稳固，以至于我们的嵌入式包管理器是第一个公开可用的工具，它解决了 Sam Saccone在五年前发现的长期未解决的 npm 漏洞。

让我们暂停一下。

因为这是故事真正令人费解的地方。

“网络”应用和“原生”应用有什么区别？Chrome 团队一直在发布新功能 API 来缩小这一差距，并且增量正迅速接近零。

桌面级编辑。即时桌面应用程序安装。

由于 Chrome 的 PWA 功能，安装 StackBlitz 就像单击一样简单。几毫秒后，你就有了一个桌面 IDE，你可以从你的扩展坞启动。您日常工作所依赖的键绑定，例如 CMD + W 和 CMD + T “正常工作”。此外，就像在本地一样，您可以在完全独立的窗口中打开和调试您的开发服务器。

从本地文件系统读取和写入。

Chrome 团队最近发布了文件系统访问 API。这使 PWA 能够请求对本地文件系统的某些部分进行持久读写访问。与 StackBlitz WebContainers 搭配使用，这暗示了一个潜在的未来，无需在硬盘上安装节点、npm、git、VS Code 或其他任何东西。您只需要一个网络浏览器：

技巧问题：其中哪一个是 StackBlitz，哪一个实际上是 VS Code？

下一步是什么？

随着我们与开源维护者合作，为他们的用户群带来完全的兼容性并稳定核心 WebContainer 技术，我们将在接下来的一两个季度进行测试。之后是功能齐全的 StackBlitz v2。

如果可以的话，那不是很好：

• 每个 PR 上的开放环境（编辑器 + 实时预览！）。您可以浏览、播放、测试并执行真正可靠的代码审查，而无需关闭您正在处理的其他项目。
• 同时检查多个分支以并排比较它们。（您会考虑将其用于本地环境吗？在 StackBlitz 中，这意味着只是打开一个新选项卡）。
• 直接从浏览器更新您的 Docusaurus 文档或 Gatsby 博客。
• 从字面上学习任何 JavaScript 前端或后端框架，而无需安装任何东西！

开发。预习。船。️

我们与 Vercel 和 Next.js 的合作关系也才刚刚开始。为前所未有的无缝开发体验做好准备（在此处抢先体验）。

软件开发的未来是光明的。

还有很多工作要做，但我们现在可以自信地说，没有本地节点、npm、git 和 VS Code 实例的未来是切实可行的，甚至可以让世界上的软件在以前无法运行的地方运行。

想象一下未来，您可以在Cloudflare Workers等平台上的边缘运行 WebContainer ，或者在 iPad 上本地运行整个开发环境。如何通过WASI在浏览器中运行您最喜欢的 VS Code 扩展，或运行 Python、Java 或 R 等非 Web 原生语言？仍有许多未知数有待发现和解决，但我们相信这项技术的未来机会是巨大的。

这些事情可能看起来有点疯狂。而且还有很多不为人知的未知数。但我们认为这个新的未来值得一试。因为，谁知道呢？它最终可能会出人意料地惊人。

---

谢谢阅读！在Twitter 上关注我们，了解所有激动人心的更新。我们的核心团队今天和明天（5/20 和 5/21）在 Twitter Spaces 上进行实时问答。

如果您想了解更多关于 WebContainer 以及如何参与的信息，请查看核心 WebContainer WG repo。您还可以在最近的播客节目中了解更多关于起源故事和更深入的技术细节。

感谢我们在 Vercel 和 Google 的合作伙伴、我们的客户以及每月使用 StackBlitz 的数百万开发人员。

喜欢您所看到的并希望帮助我们推进 Web 开发未来的愿景吗？访问stackblitz.com并帮助我们完善 Next.js 测试版并提供反馈。与我们合作，为您喜爱的开源库带来兼容性。参与帮助将世界上的本机二进制文件转换为 WebAssembly。快来加入StackBlitz 团队吧。或者，只是告诉您的朋友有关在浏览器中本地运行的最快、最安全和一致的 Web 开发环境！

最后，我要感谢 StackBlitz 出色的团队，他们为使这个项目成为现实而孜孜不倦地工作 走吧！