WebContainers简介：在浏览器中原⽣运⾏Node.js（译⽂）本篇⽂章来⾃ 2021 年 5 ⽉ 20 ⽇
嗨！我们是StackBlitz，⼀个专门为⽹络开发量⾝定制的在线IDE。在本周的⾕歌I/O主题演讲中，你可能会看到我们偷看。
今天，我们很⾼兴地宣布⼀项新技术，我们⼀直在与Next.js和Google的团队合作。
⼏年前，我们意识到⽹络正在⾛向⼀个关键的转折点。WebAssembly和出现似乎使编写⼀个功能强⼤的基于WebAssembly的操作系统成为可能，完全在浏览器中运⾏Node.js。我们设想了⼀个⽐本地环境更快、更安全、更⼀致的优越开发环境，以实现⽆缝的代码协作，⽽⽆需设置本地环境。
这听起来遥不可及。但是，如果⽹络现在运⾏了、和的完整环境，我们想知道：开发⼈员最终可以使⽤web浏览器构建web应⽤吗？
我们决定试⼀试。我们希望⼀切顺利，并期望最坏。两年后（时间飞逝， ），结果出⼈意料地出现了
今天，我们很⾼兴宣布WebContainers。
WebContainers允许您创建在毫秒内启动的全栈Node.js环境，并⽴即在线和链接可共享——只需单击⼀次。环境加载了VS Code强⼤的编辑体验、完整的终端、npm等。它还完全运⾏在您的浏览器中，这产⽣了⼀些关键的好处：
⽐你本地的环境快。Build完成速度提⾼20%，软件包安装完成>=⽐yarn/npm快5倍。
Node.js 浏览器内调试。与Chrome DevTools的⽆缝集成允许本机后端调试，⽆需安装或扩展。
默认情况下是安全的。所有代码执⾏都发⽣在浏览器的安全沙盒内，⽽不是远程虚拟机或本地⼆进制⽂件。
同样，这些环境不在远程服务器上运⾏。相反，每个环境都完全包含在您的⽹页浏览器中。没错：Node.js运⾏时本⾝有史以来第⼀次在浏览器内原⽣运⾏。
您可以在上或单击下⾯的⼊门项⽬之⼀亲⾃尝试⼀下。
在毫秒内在浏览器中启动Node.js项⽬（不要眨眼！）：
截⾄今天发布，WebContainers现已进⼊公开测试阶段。当前的⽀持包括Next.js、GraphQL和Vanilla Node.js，我们正在与其他开源项⽬合作，以扩⼤⽀持。（如果您想与我们合作，请查看）。
为什么？
建⽴本地环境是⼀个巨⼤的轰动效应——尤其是如果你想快速原型⼀个很酷的想法，尝试⼀个新的开
源库，创建⼀个错误复本或与同事合作（“嘿，你能在本地快速查看这个分⽀吗？” ）。随着Web开发转向全栈SSR和SSG⼯具链，如Next.js，这个问题⽐以往任何时候都更加常见
运⾏⽤户提交的错误复制代码也成为开源维护者和，这些类型的供应链攻击正在。
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服务器，即使在您脱机时，这些服务器仍将继续⼯作。因为它完全运⾏在浏览器安全沙盒中，服务器响应的延迟⽐本地主机少，并保护您的⽹络服务器免受本地主机攻击：
web浏览器在哪里打开
零⾜迹。靴⼦在毫秒内。
浏览器在执⾏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团队最近发布了。这使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本地实例的未来是⼀种切实的可能性，甚⾄可以使世界软件在以前⽆法运⾏的地⽅运⾏。
想象⼀下，在未来，您可以在等平台上或iPad上原⽣的整个开发环境上运⾏WebContainers。运⾏您最喜欢的VS Code扩展，或通过浏览器中运⾏Python、Java或R等⾮⽹络本机语⾔怎么样？还有很多未知数有待揭开和解决，但我们相信这项技术的未来机遇是巨⼤的。
这些事情可能看起来有点疯狂。还有许多未知数。但我们认为这个新未来值得⼀试。因为，谁知道呢？它最终可能会出⼈意料地出现。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。