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

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"几年前，我们意识到网络正朝着一个关键的拐点发展。WebAssembly和新功能API的出现，使我们有可能编写一个基于WebAssembly的操作系统，足以运行Node.js，完全在你的浏览器内。我们设想了一个优越的开发环境，它比本地环境更快、更安全、更一致，以实现无缝的代码协作，而无需建立一个本地环境。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这听起来很牵强，甚至不可能。但是，如果在网络浏览器里，能够为平面设计、视频编辑和富文档编辑提供一个完整运行的环境，我们想知道：开发者最终是否有可能在网络上来构建这一切？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们决定试一试，挑战一下。我们希望能有最好的结果，也期待着最坏的结果。两年后（时间飞逝😅），结果是出乎意料的惊人。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"今天，我们很高兴地宣布WebContainers。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebContainers允许你创建全栈式的Node.js环境，在几毫秒内启动，并立即在线和链接共享--只需一次点击。该环境加载了VS Code强大的编辑体验、一个完整的终端、npm等。它也完全在你的浏览器中运行，这产生了一些关键的好处。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"比你的本地环境更快","attrs":{}},{"type":"text","text":"。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"构建完成的速度比yarn/npm快20%，软件包安装完成的速度比yarn/npm快5倍以上。","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"浏览器中的Node.js调试","attrs":{}},{"type":"text","text":"。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"与Chrome DevTools无缝集成，实现了本地后端调试，无需安装或扩展。","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"默认情况下是安全的","attrs":{}},{"type":"text","text":"。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所有代码的执行都发生在浏览器的安全沙盒内，而不是在远程虚拟机或本地二进制文件上。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同样，这些环境不是在远程服务器上运行。相反，每个环境都完全包含在你的网络浏览器中。这是正确的：Node.js运行时间本身是有史以来第一次在浏览器中原生运行。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"你可以在StackBlitz.com上自己试试，或者点击下面的一个启动项目。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在几毫秒内，在浏览器中启动一个Node.js项目（不要眨眼！）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://stackblitz.com/fork/nextjs","title":"","type":null},"content":[{"type":"text","text":"NEXT.JS","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://stackblitz.com/fork/graphql","title":"","type":null},"content":[{"type":"text","text":"GRAPHQL","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://stackblitz.com/fork/http-server","title":"","type":null},"content":[{"type":"text","text":"HTTP服务器","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://stackblitz.com/fork/node","title":"","type":null},"content":[{"type":"text","text":"node.js启动器","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"从今天的发布会开始，WebContainers已经进入了公开测试阶段。目前的支持包括Next.js、GraphQL和Vanilla Node.js，我们正在与其他开源项目合作以扩大支持。如果你想与我们合作，请查看我们的","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/stackblitz/webcontainer-core/blob/main/Supported_frameworks.md","title":"","type":null},"content":[{"type":"text","text":"repo","attrs":{}}]},{"type":"text","text":"）。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8c/8c17767d169a0c36599000f191f8158c.gif","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"为什么？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配置一个本地环境是还是会很麻烦的--特别是当你想快速建立一个很酷的想法的原型，尝试一个新的开源库，一个bug重现或与同事合作（\"嘿，你可以在本地快速检查这个分支吗？\" 😒）。随着网络开发向Next.js这样的全栈式SSR和SSG工具链发展，这个问题比以往任何时候都更常见。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"运行用户提交的代码进行错误重现，也正在成为开源维护者和财富100强公司的一个主要安全风险，这些类型的供应链攻击正在上升。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"StackBlitz通过利用浏览器内置的几十年的速度和安全创新来解决这些问题。StackBlitz的所有计算都是在浏览器的安全沙盒中即时发生的，甚至可以脱离你的本地机器。这种模式也带来了一些关键的开发和调试的好处（更多关于这些的内容在后面）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"那么Code Spaces/Sandbox/Repls/...呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"传统的在线集成开发环境在远程服务器上运行你的整个开发环境，并将结果通过互联网传回你的浏览器。这种方法的问题在于，它几乎没有什么安全方面的优势，而且几乎在所有方面都提供了比本地机器更差的体验：它需要几分钟的时间来旋转容器，容易出现网络延迟，不能离线工作，经常导致网络超时，调试冻结/破碎的容器几乎是不可能的，而且点击刷新只是将你重新连接到破碎的容器。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"释放你的浏览器的力量","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用Chrome DevTools对Node.js进行无缝调试。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"事实证明，浏览器真的很擅长调试Javascript。令人震惊，我知道；) 通过在浏览器中执行Node.js，与Chrome DevTools的整合开箱即用。无需安装，无需扩展，只需在浏览器中进行本地后端调试即可。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f9/f988161f44e2314560a4f87d31fcdfc8.gif","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"运行服务器在你的浏览器中","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"是的，实际上。WebContainers包括一个虚拟化的TCP网络堆栈，它被映射到你的浏览器的ServiceWorker API，使你能够立即按需创建实时的Node.js服务器，即使你下线也能继续工作。由于它完全在浏览器的安全沙盒中运行，服务器响应的延迟比localhost更小!，并保护你的网络服务器免受localhost的攻击。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"零依赖，甚至在几毫秒内启动","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"浏览器在执行Javascript和WebAssembly时速度惊人。我们利用这一点来创建一个即时的开发操作系统，不使用服务器资源，也不会在你的电脑上创建一个node_modules黑洞。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"每次加载页面时都有一个新的环境","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"再见，rm -rf node_modules! WebContainer的内置npm客户端是如此之快，以至于它在每次页面加载时都会运行一个全新的安装，确保你每次都能得到一个干净的环境。如果你的环境真的出了问题，你可以回到一个干净的状态，就像你做任何其他网络应用一样：点击刷新按钮。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ed/ed7e003425807a0366655cea76c6ed83.gif","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"零延时，可离线工作","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果说居家工作的转变让我们有什么教训的化，那其中之一就是网络故障经常发生。互联网服务供应商经常宕机。有了StackBlitz，你可以继续工作，没有网络连接，无论你是在火车上，在飞机上，还是在雨中的后座上。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8c/8c3869c8dd481801e041c6f7b2ebfc85.gif","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"默认情况下是安全的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有了StackBlitz新颖的计算模型，100%的代码执行都发生在浏览器安全沙盒中。这导致了一个比本地更快、更少限制的开发环境，同时提供了更多的安全性，这是一个非常罕见的组合。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"事实上，默认的安全态势是如此稳固，我们的嵌入式软件包管理器是第一个公开可用的工具，解决了Sam Saccone五年前发现的长期未解决的npm漏洞。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":18}},{"type":"strong","attrs":{}}],"text":"让我们停一下。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"size","attrs":{"size":14}}],"text":"真正令人费解的地方在于这一切究竟是怎么发生的呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"网络 \"应用和 \"本地 \"应用之间有什么区别？Chrome团队一直在开发新的能力API以缩小这一差距，而且这一差距正在迅速接近零。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"桌面级编辑。即时的桌面应用安装","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由于Chrome的PWA功能，安装StackBlitz就像一次点击一样简单。几毫秒后，你就有了一个可以从你的Dock启动的桌面IDE。你在日常工作中所依赖的键位，如CMD + W和CMD + T 这般工作。此外，就像在本地一样，你有能力在一个完全独立的窗口中打开和调试你的开发服务器。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/27/27a02ad6c4138d578df44d839575f908.gif","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"从你的本地文件系统中读取和写入","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Chrome团队最近推出了文件系统访问API。这使PWA有能力请求对你的本地文件系统的部分进行持久的读写访问。与StackBlitz WebContainers搭配，这暗示了一个潜在的未来，不需要node、npm、git、VS Code或其他安装在你硬盘上的东西。你只需要一个网络浏览器。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7c/7c04f32416f3186f06fd904b7b21cbd7.gif","alt":null,"title":"技巧问题：哪一个是StackBlitz，哪一个实际上是VS Code？🙃","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"下一步会做什么呢？","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在接下来的一两个季度，我们将在测试阶段与开源维护者合作，为他们的用户群带来完全的兼容性，并稳定WebContainer的核心技术。在那之后，我们将推出功能齐全的StackBlitz v2。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你能做到这一点，那不是很好吗。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在每个PR上都可以打开一个环境（编辑器+实时预览！）。你可以浏览、玩耍、测试，从而进行真正扎实的代码审查，而不必关闭你正在进行的其他项目。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同时查看多个分支，并排比较。(你会考虑在本地环境中这样做吗？在StackBlitz中，这意味着只需打开一个新标签)","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"从浏览器上直接更新你的Docusaurus文档或Gatsby博客。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不需要安装任何东西就可以学习世面上的任何JavaScript前端或后端框架!","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"传送门♾️","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们与Vercel和Next.js的合作也才刚刚开始。准备好获得你从未见过的无缝开发体验吧（","attrs":{}},{"type":"link","attrs":{"href":"https://stackblitz.com/v2","title":"","type":null},"content":[{"type":"text","text":"这里可访问","attrs":{}}]},{"type":"text","text":"）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"软件开发的未来是光明的","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"还有很多工作要做，但我们现在可以自信地说，一个没有node、npm、git和VS Code本地实例的未来是切实可行的，甚至可以让世界上的软件在以前无法运行的地方运行。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"想象一下，在未来，你可以在Cloudflare Workers等平台的边缘运行WebContainers，或者在iPad上原生运行整个开发环境。在浏览器中通过WASI运行你最喜欢的VS Code扩展，或运行Python、Java或R等非网络本地语言，如何？还有许多未知数有待发现和解决，但我们相信这项技术的未来机会是巨大的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这些事情可能看起来有点疯狂。而且还有许多未知的未知因素。但我们认为这个新的未来值得一试。因为，谁知道呢？它最终可能会有意想不到的惊人效果。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f6/f6f905ea3fab59eeea64c208e5d10a78.png","alt":null,"title":"","style":[{"key":"width","value":"25%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}