尝鲜Webcontainers

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

2023年2月22日技术 1 分钟阅读

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

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

npm i @webcontainer/api

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

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

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

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

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

如下所示

https://webcontainers.io/