skip to content
Logo 裁晨
Table of Contents

前言

Webcontainers 使用 WebAssembly 技术开发的一个包含 node 和 npm 的类 liunx 操作系统

项目搭建

  1. 使用 vite搭建项目
  2. 安装@webcontainer/api
npm i @webcontainer/api
  1. 添加配置在vite.config.ts中添加如下
import { defineConfig } from "vite";
export default defineConfig({
  server: {
    headers: {
      "Cross-Origin-Embedder-Policy": "require-corp",
      "Cross-Origin-Opener-Policy": "same-origin",
    },
  },
});

使用

import { WebContainer } from "@webcontainer/api";
// Call only once
const webcontainerInstance = await WebContainer.boot();
console.log(webcontainerInstance);

这样便初始化完成了 63ac099ee9d625104e6cc00d1f8c06b.png

创建初始文件目录结构，并获取文件目录结构

//使用json的方式初始化文件目录
const initFiles = {
  // 文件名
  "package.json": {
    // 声明其为一个文件
    file: {
      // 文件内容
      contents: `
        {
          "name": "demo",
          "private": true,
          "scripts": {
            "dev": "node main.js"
          },
          "devDependencies": {
            "express": "^4.18.2"
          }
        }`,
    },
  },
  "README.md": {
    file: {
      contents: `这是一个基于webcontainer的express-demo`,
    },
  },
};
await webcontainerInstance.mount(initFiles);

如上，我们便完成了项目目录初始化，接下来我们通过获取目录信息 Api 获取文件是看一下文件是否已经存在

const files = await webcontainerInstance.fs.readdir("/");
console.log(files);
1677056761054.png

读取文件内容

const file = await webcontainerInstance.fs.readFile("/README.md", "utf-8");
console.log(file);
1677056978382.png

创建 main.js 并写入一个 express 的 hello world

await webcontainerInstance.fs.writeFile(
  "/main.js",
  `
  const express = require('express')
  const app = express()
  const port = 3000


  app.get('/', (req, res) => {
    res.send('Hello World!')
  })


  app.listen(port, () => {
    console.log('Example app listening on port 3000')
  })
  `,
  { encoding: "utf-8" }
);

安装项目 express 依赖

const installProcess = await webcontainerInstance.spawn("npm", ["i"]);
// 使用订阅流的方式打印依赖安装进度
installProcess.output.pipeTo(
  new WritableStream({
    write(data) {
      console.log(data);
    },
  })
);

如下所示表示其已经安装依赖成功！ 1677057501503.png

运行编写的 main.js 文件

const installProcess = await webcontainerInstance.spawn("npm", ["run", "dev"]);
installProcess.output.pipeTo(
  new WritableStream({
    write(data) {
      console.log(data);
    },
  })
);

如下所示 1677057750814.png

参考文档

https://webcontainers.io/