WebContainers 介绍: 如何在浏览器运行原生的 Nodejs

几年前，我们意识到网络正朝着一个关键的拐点发展。WebAssembly 和新功能 API 的出现，使我们有可能编写一个基于 WebAssembly 的操作系统，足以运行 Node.js，完全在你的浏览器内。我们设想了一个优越的开发环境，它比本地环境更快、更安全、更一致，以实现无缝的代码协作，而无需建立一个本地环境。

这听起来很牵强，甚至不可能。但是，如果在网络浏览器里，能够为平面设计、视频编辑和富文档编辑提供一个完整运行的环境，我们想知道：开发者最终是否有可能在网络上来构建这一切？

我们决定试一试，挑战一下。我们希望能有最好的结果，也期待着最坏的结果。两年后（时间飞逝😅），结果是出乎意料的惊人。

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

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

• 比你的本地环境更快。

构建完成的速度比 yarn/npm 快 20%，软件包安装完成的速度比 yarn/npm 快 5 倍以上。

• 浏览器中的 Node.js 调试。

与 Chrome DevTools 无缝集成，实现了本地后端调试，无需安装或扩展。

• 默认情况下是安全的。

所有代码的执行都发生在浏览器的安全沙盒内，而不是在远程虚拟机或本地二进制文件上。

同样，这些环境不是在远程服务器上运行。相反，每个环境都完全包含在你的网络浏览器中。这是正确的：Node.js 运行时间本身是有史以来第一次在浏览器中原生运行。

你可以在 StackBlitz.com 上自己试试，或者点击下面的一个启动项目。

在几毫秒内，在浏览器中启动一个 Node.js 项目（不要眨眼！）。

NEXT.JS

GRAPHQL

HTTP服务器

node.js启动器

从今天的发布会开始，WebContainers 已经进入了公开测试阶段。目前的支持包括 Next.js、GraphQL 和 Vanilla Node.js，我们正在与其他开源项目合作以扩大支持。如果你想与我们合作，请查看我们的repo）。

为什么？

配置一个本地环境是还是会很麻烦的--特别是当你想快速建立一个很酷的想法的原型，尝试一个新的开源库，一个 bug 重现或与同事合作（"嘿，你可以在本地快速检查这个分支吗？" 😒）。随着网络开发向 Next.js 这样的全栈式 SSR 和 SSG 工具链发展，这个问题比以往任何时候都更常见。

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

StackBlitz 通过利用浏览器内置的几十年的速度和安全创新来解决这些问题。StackBlitz 的所有计算都是在浏览器的安全沙盒中即时发生的，甚至可以脱离你的本地机器。这种模式也带来了一些关键的开发和调试的好处（更多关于这些的内容在后面）。

那么 Code Spaces/Sandbox/Repls/...呢？

传统的在线集成开发环境在远程服务器上运行你的整个开发环境，并将结果通过互联网传回你的浏览器。这种方法的问题在于，它几乎没有什么安全方面的优势，而且几乎在所有方面都提供了比本地机器更差的体验：它需要几分钟的时间来旋转容器，容易出现网络延迟，不能离线工作，经常导致网络超时，调试冻结/破碎的容器几乎是不可能的，而且点击刷新只是将你重新连接到破碎的容器。

释放你的浏览器的力量

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

事实证明，浏览器真的很擅长调试 Javascript。令人震惊，我知道；) 通过在浏览器中执行 Node.js，与 Chrome DevTools 的整合开箱即用。无需安装，无需扩展，只需在浏览器中进行本地后端调试即可。

运行服务器在你的浏览器中

是的，实际上。WebContainers 包括一个虚拟化的 TCP 网络堆栈，它被映射到你的浏览器的 ServiceWorker API，使你能够立即按需创建实时的 Node.js 服务器，即使你下线也能继续工作。由于它完全在浏览器的安全沙盒中运行，服务器响应的延迟比 localhost 更小!，并保护你的网络服务器免受 localhost 的攻击。

零依赖，甚至在几毫秒内启动

浏览器在执行 Javascript 和 WebAssembly 时速度惊人。我们利用这一点来创建一个即时的开发操作系统，不使用服务器资源，也不会在你的电脑上创建一个 node_modules 黑洞。

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

再见，rm -rf node_modules! WebContainer 的内置 npm 客户端是如此之快，以至于它在每次页面加载时都会运行一个全新的安装，确保你每次都能得到一个干净的环境。如果你的环境真的出了问题，你可以回到一个干净的状态，就像你做任何其他网络应用一样：点击刷新按钮。

零延时，可离线工作

如果说居家工作的转变让我们有什么教训的化，那其中之一就是网络故障经常发生。互联网服务供应商经常宕机。有了 StackBlitz，你可以继续工作，没有网络连接，无论你是在火车上，在飞机上，还是在雨中的后座上。

默认情况下是安全的

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

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

让我们停一下。

真正令人费解的地方在于这一切究竟是怎么发生的呢？

网络 "应用和 "本地 "应用之间有什么区别？Chrome 团队一直在开发新的能力 API 以缩小这一差距，而且这一差距正在迅速接近零。

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

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

从你的本地文件系统中读取和写入

Chrome 团队最近推出了文件系统访问 API。这使 PWA 有能力请求对你的本地文件系统的部分进行持久的读写访问。与 StackBlitz WebContainers 搭配，这暗示了一个潜在的未来，不需要 node、npm、git、VS Code 或其他安装在你硬盘上的东西。你只需要一个网络浏览器。

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

下一步会做什么呢？

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

如果你能做到这一点，那不是很好吗。

• 在每个 PR 上都可以打开一个环境（编辑器+实时预览！）。你可以浏览、玩耍、测试，从而进行真正扎实的代码审查，而不必关闭你正在进行的其他项目。

• 同时查看多个分支，并排比较。(你会考虑在本地环境中这样做吗？在 StackBlitz 中，这意味着只需打开一个新标签)

• 从浏览器上直接更新你的 Docusaurus 文档或 Gatsby 博客。

• 不需要安装任何东西就可以学习世面上的任何 JavaScript 前端或后端框架!

传送门♾️

我们与 Vercel 和 Next.js 的合作也才刚刚开始。准备好获得你从未见过的无缝开发体验吧（这里可访问）。

软件开发的未来是光明的

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

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

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