WebContainer: 将nodejs运行在浏览器

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第7天,点击查看活动详情

StackBlitz 定位是做一个针对web开发的在线IDE。今天我们会宣布一项和google团队一起参与的新技术。

许多年前我们就意识到web已经发展到了一个关键节点,WebAssembly的发明和新capabilities APIs 是我们可以开发一个基于WA的操作系统,在这个系统中我们可以跑nodejs,而且是完整的嵌入进浏览器中。我们预计在未来可以把开发环境相比于本地环境变得更快更安全 and 更统一。不需要搭建本地环境,就可以让更多人协同办公。

这听起来还很遥远,但是如果当所有的web开发资源都放到了web端,我们想要知道收否最终有可能开发者最终使用web来build web?

我们决定尝试一下,我们对未来抱有期待,同时脚踏实地的去做。2年以后,结果令人激动。

今天我们高兴的发布WebContainers.

WebContainers 允许你来创建全栈node环境,而且支持毫秒级启动。环境借助了VS code的强大编辑能力,terminal, npm还有其他工具。而且是完全寄宿在浏览器中,这带来了不少好处:

  • 相比本地环境运行更快. 构建提升20%,包安装相比yarn/npm提升5倍.
  • 浏览器调试nodejs. 与Chrome DevTools 无缝集成,不需要安装和扩展.
  • 默认安全. 所有的代码执行都发生在浏览器安全沙箱内部,而不是在远程的虚拟机中或是本地环境

为什么?

配置本地开发环境是个浪费时间的事情,尤其是要快速实现一个原型项目来说。这种问题当我们的web开发慢慢往全栈的SSR和SSG迁移的时候表现的尤为明显。

对于开源维护者来说想要快速复现用户提交的bug也很困难,而且最近这类供应链攻击的趋势还在上升。

那StackBlitz是怎么解决上面的问题的呢?我们直接把代码完全跑在你的浏览器中。所有的计算都在浏览器安全沙箱中进行,这样就不会中断本地机子的运行。这种方式也会解锁一些开发和调试的好处。

释放浏览器的能力

  • 借助Chrome DevTools无缝调试nodejs.
  • 在浏览器中运行server

事实上,WebContainer包含了一个虚拟的TCP网络协议栈来接管浏览器的ServiceWorker API。方便你即时创建node服务,哪怕是离线模式下。

Run API servers in your browsers

  • 零脚本,毫秒级启动

  • 零延迟,支持离线

Works offline

  • 默认安全

读写本地文件系统.

Chrome团队最近搭载了File System Access API。这个技术可以让PWA能够读写本地文件系统

Native file system access

下一步?

我们将在后续半年内在开源社区的帮助下处理兼容性问题,稳定核心的WebContainer技术,作为V2版本的内容。

你可以:

  • 在开放环境中完成代码预览和测试
  • git 多分支切换
  • 修改文档,即时预览

猜你喜欢

转载自juejin.im/post/7110861636977557518