WebContainers简介：在浏览器中原生运行Node.js（译文）

Posted 2021-09-06 karma-2014

本篇文章来自StackBlitzblog-埃里克·西蒙斯 2021 年 5 月 20 日

嗨！我们是StackBlitz，一个专门为网络开发量身定制的在线IDE。在本周的谷歌I/O主题演讲中，你可能会看到我们偷看。

今天，我们很高兴地宣布一项新技术，我们一直在与Next.js和Google的团队合作。

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

这听起来遥不可及。但是，如果网络现在运行了平面设计师、视频编辑器和富文档编辑的完整环境，我们想知道：开发人员最终可以使用web浏览器构建web应用吗？

我们决定试一试。我们希望一切顺利，并期望最坏。两年后（时间飞逝，😅），结果出人意料地出现了

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

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

• 比你本地的环境快。Build完成速度提高20%，软件包安装完成>=比yarn/npm快5倍。
• Node.js 浏览器内调试。与Chrome DevTools的无缝集成允许本机后端调试，无需安装或扩展。
• 默认情况下是安全的。所有代码执行都发生在浏览器的安全沙盒内，而不是远程虚拟机或本地二进制文件。

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

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

在毫秒内在浏览器中启动Node.js项目（不要眨眼！）：

• NEXT.JSGRAPHQLHTTP服务器NODE.JS 启动器

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

为什么？

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

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

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

代码空间/沙盒/循环/...怎么办？

传统在线IDE在远程服务器上运行整个开发环境，并将结果流回互联网到浏览器。这种方法的问题在于，它几乎没有安全效益，几乎在所有方面都比本地机器提供更糟糕的体验：旋转容器需要几分钟，容易出现网络延迟，无法脱机工作，通常导致网络超时，调试/破碎的容器几乎是不可能的，点击刷新只会再次将您重新连接到破碎的容器。

StackBlitz是第一个计算模型对我来说有意义的在线IDE。              —汤姆·普雷斯顿-沃纳，GitHub创始人兼StackBlitz的投资者

释放浏览器的强大功能。

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

原来，浏览器真的很擅长调试javascript。令人震惊的是，我知道;)通过在浏览器中执行Node.js，与Chrome DevTools的集成“只是开箱即用”。没有安装，没有扩展，只是在浏览器中进行原生后端调试：

我们很高兴与StackBlitz团队合作，使Next.js和Vercel更容易被开发人员访问。能够利用浏览器的内置功能来开发和调试Next.js应用程序是一个游戏规则的改变者。 —吉列尔莫·劳奇，Vercel的创始人和Next.js的创始人

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

是的，实际上。WebContainers包括一个虚拟的TCP网络堆栈，该堆栈映射到浏览器的ServiceWorker API，使您能够立即按需创建实时Node.js服务器，即使在您脱机时，这些服务器仍将继续工作。因为它完全运行在浏览器安全沙盒中，服务器响应的延迟比本地主机少，并保护您的网络服务器免受本地主机攻击：

零足迹。靴子在毫秒内。

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

每个页面加载初始化环境。

再见，rm -rf node_modules！WebContainer内置的npm客户端速度如此之快，以至于它在每个页面加载上运行一个新的安装，以确保您每次都有一个干净的环境。如果您的环境确实出了问题，您可以像其他任何Web应用程序一样恢复到清洁状态：点击刷新按钮。

零延迟。离线工作。

如果说在家工作教会了我们什么，那就是网络经常不稳定。ISP 下降——很多。有了StackBlitz，无论您是在火车上、飞机上还是雨中后座优步，您都可以继续工作，无需互联网连接：

默认情况下是安全的。

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

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

让我们暂停一下。

因为这就是故事真正让人心烦意乱的地方。

在谷歌I/O，我们很高兴展示StackBlitz如何使用最新的网络功能来提供模糊网络应用程序和桌面应用程序的体验。 ——迪翁·阿尔马尔，谷歌Chrome工程总监

“网络”应用程序和“本地”应用程序有什么区别？Chrome团队一直在发布新的功能API来缩小这一差距，三角洲正在迅速接近零。

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

多亏了Chrome的PWA功能，安装StackBlitz只需单击一下即可。毫秒后，您将获得一个桌面IDE，您可以从基座启动。您日常生产力所依赖的密钥绑定，如CMD + W和CMD + T“只是工作”。此外，就像在本地一样，您可以在一个完全独立的窗口中打开和调试您的开发服务器。

从本地文件系统读写。

Chrome团队最近发布了文件系统访问API。这使PWA能够请求对本地文件系统部分的持久读写访问。与StackBlitz WebContainers配对，这暗示了未来的潜在需求，而无需在硬盘上安装node、npm、git、VS Code或任何其他内容。你只需要一个网页浏览器：

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

接下来是什么？

我们将在未来一两个季度在测试版中度过，因为我们与开源维护人员合作，为他们的用户群带来完全兼容性，并稳定核心WebContainer技术。之后是功能齐全的StackBlitz v2。

如果可以的话，是不是很棒：

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

开发. 预览. 两者关系。♾️

我们与Vercel和Next.js的合作还刚刚开始浮出水面。准备好体验前所未有的无缝开发体验（尽早访问这里）。

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

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

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

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

原文链接：https://blog.stackblitz.com/posts/introducing-webcontainers/