今天来介绍一个 StackBlitz (opens new window) 与 Next.js 和 Google 团队合作的新技术。
WebAssembly 和新功能 API 的出现，使得编写一个基于 WebAssembly 的操作系统成为可能，它可以完全在浏览器中运行 Node.js，它比本地环境更快、更安全、更一致，以实现无缝的代码协作，而无需建立一个本地环境。
设置本地环境是一个巨大的麻烦--尤其是当你想快速建立一个很酷的想法的原型，尝试一个新的开源库，创建一个 bug 重现或与同事合作（"嘿，你可以在本地快速检查这个分支吗？" 😒）。随着 web 开发向全栈式 SSR 和 SSG 工具链（如 Next.js）发展，这个问题比以往任何时候都更常见。
传统的在线集成开发环境在远程服务器上运行你的整个开发环境，并将结果通过互联网传回你的浏览器。这种方法的问题是，它几乎没有什么安全性，而且几乎在所有方面都比你的本地机器提供了更差的体验：它需要几分钟来启动容器，容易出现网络延迟，不能离线工作，经常导致网络超时，调试冻结/破碎的容器几乎是不可能的，点击刷新只是让你再次连接到破碎的容器。
WebContainers 允许你创建一个完整的 Node.js 环境，在毫秒内启动，并立即在线和链接共享--只需一次点击。该环境加载了 VS Code 强大的编辑体验、一个完整的终端、npm 等。它也完全在你的浏览器中运行，这产生了一些关键的好处。：
- 比你的本地环境更快。构建完成的速度比 yarn/npm 快 20%，软件包安装完成的速度比 yarn/npm 快 5 倍以上。
- 浏览器中的 Node.js 调试。与 Chrome DevTools 的无缝集成实现了本地后端调试，不需要安装或扩展。
- 默认情况下是安全的。所有代码的执行都发生在浏览器的安全沙盒内，而不是在远程虚拟机或本地二进制文件上。
支持的浏览器:
- Chrome
- Edge
- Brave(需要配置)
- Safari(即将支持)
- Firefox(即将支持)
# 目标
提供给开发者一个快速、安全、一致的开发环境
# 浏览器中的 Node.js 调试
通过在浏览器中执行 Node.js，与 Chrome DevTools 的集成即开即用。无需安装，无需扩展，仅在浏览器中进行本机后端调试即可
# 安全
WebContainers 包括一个虚拟化的 TCP 网络堆栈，它被映射到你的浏览器的 ServiceWorker API 上，使你能够立即按需创建实时的 Node.js 服务器，即使你下线了也能继续工作。由于它完全在浏览器的安全沙盒中运行，服务器响应的延迟比 localhost 更小，并保护你的网络服务器免受 localhost 的攻击。
# 快速
浏览器执行 Javascript 和 WebAssembly 的速度非常快。我们利用它来创建一个即时开发的 OS，该 OS 不使用服务器资源，不会在你的电脑上创造一个 node_modules 黑洞。
# 一致的
因为环境之间是不一致的，所以当 bug 第一次发现的时候我们经常会说"在我的机器上是对的"，Containers 可以帮助脱离不同系统和环境之间的复杂度
# 开发体验
- 阻力小
- 采用新的工具并不意味着重写代码库。好的工具应该乐于去使用并且应该尽量不扰乱现有的工作流
- 减少痛苦 - 复杂的程序需要多个进程或者线程已经笨重地在 web 上工作了。web 不会保留单线程很久但是开发者必须
有权去帮助创建一个多线程 web
# 研究
带着从这个获取的知识去帮助改进现有的标准和介绍新的必要的功能
# 局限性
有着新技术具备的一些局限
- nodejs 运行时
- 未来计划增加多语言的支持，但是目前只支持 nodejs
- 原生二进制和 npm postinstall 脚本
- 不安全的软件包
- http 网络请求
- 被限制在浏览器里请求网络的能力，不太可能连接上 mongodb、redis 等服务，但是能够支持基于 http 的协议，比如 websocket。http 请求外部服务必须被同源策略允许
- 模块支持
- 目前通过转译可以支持 ESM，会在未来支持原生 ESM
WebContainer 应用的最初焦点将是基于 Node.js 的开发工具链。软件开发工具链往往是缓慢的、不安全的、跨平台的不一致的，主要是由于底层操作系统和机器架构的差异。他们也有一个彻底的、切实的范围，即需要在操作系统中实现的内容（进程管理、文件系统访问、多线程计算、网络堆栈等）。通过这样做，我们可以将网络带到一个拐点，即网络可以被原生地用于构建网络，这是将网络带到更多生产工作流程中的重要一步。
