尝鲜Webcontainers

前言

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

项目搭建

1. 使用 vite搭建项目
2. 安装@webcontainer/api

npm i @webcontainer/api

3. 添加配置在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);

这样便初始化完成了

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

//使用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);

读取文件内容

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

创建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);
    },
  })
);

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

运行编写的main.js文件

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

如下所示

参考文档

webcontainers.io/