前言
2021 年,StackBlitz发布了 WebContainers,这是一种基于 WebAssembly 的新型操作系统,它使 Node.js 能够完全在浏览器内运行。 在过去两年,每月有数百万开发人员使用 WebContainers,比如典型的应用 StackBlitz 的编辑器。
2023 年 2 月 14 日 StackBlitz 公开发布了 WebContainer API ,邀请整个 JavaScript 和 Node.js 社区一起在 WebContainers 之上构建应用程序! 截止本文发布,StackBlitz已经基于WebContainer构建了 StackBlitz 编辑器、Codeflow IDE 和 Web Publisher等公开产品。
1.什么是WebContainers?
WebContainers 是一个基于 WebAssembly 的微型操作系统,其允许在浏览器选项卡内本地启动 Node.js 服务器。 可以将其视为在浏览器内的页面加载时无缝交付的“Electron polyfill”。
![1677137945934307.jpg fd0fb8d92fb549c3abb87069983d6c6.jpg](http://m.sbmmt.com/img/upload/image/234/120/162/1677137945934307.jpg)
WebContainers提供的API 允许无头访问 ,允许开发人员灵活地在该技术之上构建自己的应用程序。 同时,WebContainers的诸多能力都已开源,并为企业用例提供支持和许可。WebContainers的主要能力包括:
![1677137955666318.jpg dca159c59300fb63929b592009f0427.jpg](http://m.sbmmt.com/img/upload/image/180/234/674/1677137955666318.jpg)
- 运行本机包管理器:在浏览器中运行原生版本的 npm、pnpm 和 yarn,一切都在您的应用程序中,速度比本地快 10 倍。
- 完整的浏览器支持:支持在所有主流浏览器中运行 WebContainer,从基于 Chromium 的浏览器到 Firefox 或 Safari TP
- 所有主流框架支持:立即启动运行任何主流现代框架的一次性环境。
- 开箱即用地运行 Wasm:将您最喜欢的语言或框架移植到 Wasm 以在 WebContainers 中运行
2.WebContainers API 的主要功能
2.1 浏览器内文件系统
WebContainers 使用存储在内存中的临时虚拟文件系统启动,允许开发者以编程方式载入/载出文件和目录,并对它们执行标准文件系统操作。
const file = await webcontainerInstance.fs.readFile('/package.json', 'utf-8'); // readFile文件 const files = await webcontainerInstance.fs.readdir('/src'); // readdir读取目录 await webcontainerInstance.fs.rm('/src', { recursive: true }); // 删除目录 await webcontainerInstance.fs.writeFile('/src/main.js', 'console.log("Hello from WebContainers!")'); // 写文件 await webcontainerInstance.fs.mkdir('src'); // mkdir
2.2 开发服务器
在 WebContainer 中可以按需启动 HTTP 服务器,并接收一个预览 URL,该 URL 可以与用户共享或使用 iframe 直接显示在应用程序中。 虚拟化的 TCP 网络堆栈映射到浏览器的 ServiceWorker API 并完全在本地运行,因此即使用户失去互联网连接,服务器也将继续工作。
async function startDevServer() { // 执行 `npm run start` 启动Express服务器 await webcontainerInstance.spawn('npm', ['run', 'start']); // 等待 `server-ready` 事件 webcontainerInstance.on('server-ready', (port, url) => { iframeEl.src = url; }); }
在浏览器开发工具中,在下一步运行 startDevServer() 之后,将能够看到正在运行的开发服务器:
![1677137974499049.jpg f9cc0854e22296b327cea4ed3b4938b.jpg](http://m.sbmmt.com/img/upload/image/296/169/398/1677137974499049.jpg)
注意:WebContainers 公开server-ready事件,该事件在服务器准备好接受请求时发出。您可以使用 webcontainerInstance.on 监听事件。
2.3 Node.js 命令行
Node.js 命令可以直接传递到 WebContainers 以在页面加载时执行或由应用程序中的用户行为触发。 你可以 npm 安装包,启动新的节点服务器,或者构建应用程序,就像在本地开发环境中一样。
webcontainerInstance.spawn('npm', ['install']); webcontainerInstance.spawn('ls', ['src', '-l']); // 安装依赖 async function installDependencies() { const installProcess = await webcontainerInstance.spawn('npm', ['install']); return installProcess.exit; } // 函数调用 window.addEventListener('load', async () => { textareaEl.value = files['index.js'].file.contents; webcontainerInstance = await WebContainer.boot(); await webcontainerInstance.mount(files); const exitCode = await installDependencies(); // 安装依赖 if (exitCode !== 0) { throw new Error('Installation failed'); }; });
![1677137991766410.jpg 1cc5d67d0b290c5baed041296b13801.jpg](http://m.sbmmt.com/img/upload/image/397/782/452/1677137991766410.jpg)
总之,WebContainer API 为 Web 应用程序提供了更新级别的灵活性、可扩展性和性能!
3.使用 WebContainer API 构建什么?
stackblitz与社区成员密切合作并根据反馈、需求和问题开发了 WebContainers。 目前基于WebContainers的用例也越来越多,比如下面的经典用例:
3.1 交互式编码教程
Rich Harris 主导的 Svelte已经开始使用 WebContainers 。 他们构建了一个令人印象深刻的交互式教程,教您如何逐步使用 SvelteKit。 这是获得框架实践经验并了解其工作原理的好方法,同时获得了一致好评!
![1677138005593862.jpg 7a2d9bc43fe1728c4f409f10c495442.jpg](http://m.sbmmt.com/img/upload/image/304/555/116/1677138005593862.jpg)
Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作,而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。
与使用虚拟(virtual)DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。
3.2 生产级 Web IDE
StackBlitz使用 Webcontainers 构建了 Codeflow IDE,它是桌面 Visual Studio Code IDE 的全功能版本,支持 git 命令、桌面扩展和带终端的 Node.js 开发服务器。
![1677138010151291.jpg 4754bd52280549e27952a52d3010196.jpg](http://m.sbmmt.com/img/upload/image/219/559/616/1677138010151291.jpg)
3.3 人工智能应用
WebContainer API 还解锁了开发人员可以创建的一类新的 AI 应用程序。 想象一下使用 OpenAI 集成来生成完全在浏览器内运行的实时应用程序!
![1677138015955541.jpg 175dff508c16859adca0d7672132d11.jpg](http://m.sbmmt.com/img/upload/image/974/148/332/1677138015955541.jpg)
3.4 无代码/低代码环境
WebContainers 支持以前不可能实现的新型低代码或无代码解决方案。 StackBlitz的用户友好型文档编辑工具 Web Publisher 等工具确实使网络更加开放并打破了进入壁垒。
![1677138036821825.jpg a2512e56684047e993d8cd012242e20.jpg](http://m.sbmmt.com/img/upload/image/898/977/461/1677138036821825.jpg)
4.WebContainer的hello-world示例
应用配置环境:
export const projectFiles = { myProject: { directory: { 'package.json': { file: { contents: '...', } }, 'index.js': { file: { contents: '...', } }, } } };
hello-world.ts程序:
import { WebContainer, FileSystemTree } from '@webcontainer/api'; import { projectFiles } from './project-files.ts'; async function main() { // 首先我们启动一个 WebContainer const webcontainer = await WebContainer.boot(); // 启动容器后,我们复制所有项目文件 // 进入容器的文件系统 await webcontainer.mount(projectFiles); // 安装文件后,通过生成 `npm install` 来安装依赖 const install = await webcontainer.spawn('npm', ['i']); await install.exit; // 一旦安装了所有依赖项,我们就可以生成 `npm` // 从项目的 `package.json` 运行 `dev` 脚本 await webcontainer.spawn('npm', ['run', 'dev']); }
5.本文总结
本文主要和大家介绍如何在浏览器中运行 Node.js,同时对WebContainer 1.0做了介绍,探讨了什么是WebContainers、WebContainers API 的主要功能 、使用 WebContainer API 应用场景等等!
WebContainers 非常适合交互式编码体验,可以用在生产级IDE,编程教程,下一代文档等场景。虽然看起来功能十分有限,却是从 0 到 1 的突破,尝试在浏览器端运行一个微型的操作系统,相信不久的未来,不仅仅是 nodejs,其他的语言,例如 python、Java等。