WebContainer 1.0发布了！聊聊什么是WebContainers！

编辑: admin 分类: .net 发布时间: 2023-06-08 来源:互联网

前言

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”。

fd0fb8d92fb549c3abb87069983d6c6.jpg

WebContainers提供的API 允许无头访问 ，允许开发人员灵活地在该技术之上构建自己的应用程序。 同时，WebContainers的诸多能力都已开源，并为企业用例提供支持和许可。WebContainers的主要能力包括：

dca159c59300fb63929b592009f0427.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() 之后，将能够看到正在运行的开发服务器：

f9cc0854e22296b327cea4ed3b4938b.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');
  };
});
登录后复制1cc5d67d0b290c5baed041296b13801.jpg

总之，WebContainer API 为 Web 应用程序提供了更新级别的灵活性、可扩展性和性能！

3.使用 WebContainer API 构建什么？

stackblitz与社区成员密切合作并根据反馈、需求和问题开发了 WebContainers。 目前基于WebContainers的用例也越来越多，比如下面的经典用例：

3.1 交互式编码教程

Rich Harris 主导的 Svelte已经开始使用 WebContainers 。 他们构建了一个令人印象深刻的交互式教程，教您如何逐步使用 SvelteKit。 这是获得框架实践经验并了解其工作原理的好方法，同时获得了一致好评！

7a2d9bc43fe1728c4f409f10c495442.jpg

Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。

与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。

3.2 生产级 Web IDE

StackBlitz使用 Webcontainers 构建了 Codeflow IDE，它是桌面 Visual Studio Code IDE 的全功能版本，支持 git 命令、桌面扩展和带终端的 Node.js 开发服务器。

4754bd52280549e27952a52d3010196.jpg

3.3 人工智能应用

WebContainer API 还解锁了开发人员可以创建的一类新的 AI 应用程序。 想象一下使用 OpenAI 集成来生成完全在浏览器内运行的实时应用程序！

175dff508c16859adca0d7672132d11.jpg

3.4 无代码/低代码环境

WebContainers 支持以前不可能实现的新型低代码或无代码解决方案。 StackBlitz的用户友好型文档编辑工具 Web Publisher 等工具确实使网络更加开放并打破了进入壁垒。

a2512e56684047e993d8cd012242e20.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等。

更多阅读