当前位置: 首页 > news >正文

【Web IDE】WebContainer容器在浏览器中启动运行nodejs并使用vite启动项目

参考了文章WebContainer/api 基础(Web IDE 技术探索 一)

在浏览器中运行vite的vue3项目

示例站点

最终效果

在这里插入图片描述

主要流程

加载WebContainer=》加载代码压缩包=>解压代码压缩包=》生成文件树=》挂载文件树=》pnpm安装依赖=》启动项目

代码

<script setup>
import { onMounted, ref } from 'vue'
import { WebContainer } from "@webcontainer/api";
import { mountZip } from '@/views/Containers/utls.js'
const webUrl = ref("");
const codeZip = '/code/vue-project.zip'
async function initContainer() {console.log("挂载")// Call only onceconst webcontainerInstance = await WebContainer.boot();const nodeV = await webcontainerInstance.spawn("node", ["-v"]);nodeV.output.pipeTo(new WritableStream({write(data) {console.log("node -v ==>", data);},}));const fileTree =  await mountZip(codeZip)console.log('挂载文件',fileTree)// 1. 挂载文件await webcontainerInstance.mount(fileTree);console.log("ls");const ls = await webcontainerInstance.spawn("ls", ["-al"]);ls.output.pipeTo(new WritableStream({write(data) {console.log(data);},}));// 2. 下载依赖console.log("pnpm install");const install = await webcontainerInstance.spawn("pnpm", ["install"]);install.output.pipeTo(new WritableStream({write(data) {console.log(data);},}));// 3. 判断exit 状态let code = await install.exit;if (code !== 0) {console.error("error to install.");}// 4. 启动服务console.log("npm run dev");const process = await webcontainerInstance.spawn("npm", ["run","dev"]);process.output.pipeTo(new WritableStream({write(data) {console.log(data);},}));// 5. 监听服务启动webcontainerInstance.on("server-ready", (port, url) => {console.log("server-ready", url);webUrl.value = url;});
}onMounted(() => {mountZip(codeZip)initContainer()
})
</script><template>
<div><iframe :src="webUrl" style="height: 100vh;width: 100%"/>
</div>
</template><style scoped></style>

工具函数

import JSZip from 'jszip'
export async function  mountZip(zipUrl){console.log("读取zip文件",zipUrl)const fileTree = {}try {// 使用 fetch 获取 ZIP 数据const response = await fetch(zipUrl);const buffer = await response.arrayBuffer();// 使用 JSZip 处理获取到的数据const zip = new JSZip();const zipContents = await zip.loadAsync(buffer);// 处理解压后的内容for (const [relativePath, file] of Object.entries(zipContents.files)) {// console.log('relativePath',relativePath)if(file.dir){let dirList = relativePath.split('/')// console.log('dirList',dirList)if(dirList.length > 2){let tmp = fileTreefor (let i = 0; i < dirList.length - 1; i++) {// console.log('tmp(dirList[i]',tmp[dirList[i]])if(tmp[dirList[i]]){tmp = tmp[dirList[i]].directory}else{tmp[dirList[i]] = {directory: {},}}}}else{fileTree[dirList[0]] = {directory: {},}}}else{let dirList = relativePath.split('/')// console.log('dirList',dirList)if(dirList.length > 1) {let tmp = fileTreefor (let i = 0; i < dirList.length - 1; i++) {// console.log('tmp(dirList[i]', tmp[dirList[i]])if (tmp[dirList[i]]) {tmp = tmp[dirList[i]].directory} else {tmp[dirList[i]] = {directory: {},}}}// console.log('tmp',tmp)tmp[dirList[dirList.length - 1]] = {file: {contents: await file.async('string')},}}else{// console.log('根目录文件',dirList)fileTree[dirList[dirList.length - 1]] = {file: {contents: await file.async('string')},}}}}} catch (error) {console.error('获取 ZIP 数据时出错:', error);}console.log('fileTree',fileTree)return fileTree
}

相关文章:

【Web IDE】WebContainer容器在浏览器中启动运行nodejs并使用vite启动项目

参考了文章WebContainer/api 基础&#xff08;Web IDE 技术探索 一&#xff09; 在浏览器中运行vite的vue3项目 示例站点 最终效果 主要流程 加载WebContainer》加载代码压缩包>解压代码压缩包》生成文件树》挂载文件树》pnpm安装依赖》启动项目 代码 <script setup…...

Linux 多线程

目录 1 多线程的概念 1.1 再次理解进程的地址空间和页表 1.2 线程 2 线程控制 2.1 创建线程 pthread_create 2.2终止线程 2.3 线程等待 2.4 线程取消 2.5 线程分离 3 原生线程库 4 互斥 &#xff08;锁&#xff09; pthread_mutex_t pthread_mutex_init pthread_mute…...

C语言编写三子棋游戏:从概念到思路到实现

目录 一.文章概述 二.游戏规则概述 三.理解思路 1. 定义游戏数据结构 2. 游戏搭建思路及其步骤 菜单选择列表&#xff1a; 初始化棋盘&#xff1a;所有位置均为空格 创建棋盘样式 设置玩家下棋 设置电脑下棋 检查游戏状态&#xff1a; 四.代码示例 一.game.c部分 …...

React.js如何使用Bootstrap

在 React.js 项目中使用 Bootstrap 有多种方法&#xff0c;主要包括直接引入 Bootstrap CSS 文件和使用 React Bootstrap 库。下面将详细介绍这两种方法。 方法一&#xff1a;直接引入 Bootstrap CSS 文件 这是最简单的方式&#xff0c;只需在项目中引入 Bootstrap 的 CSS 文…...

深入解析:Redis与Nacos分布式锁在业务中的具体应用

时间&#xff1a;2024年08月22日 作者&#xff1a;小蒋聊技术 邮箱&#xff1a;wei_wei10163.com 微信&#xff1a;wei_wei10 音频地址&#xff1a;https://xima.tv/1_HBPYxC?_sonic0 希望大家帮个忙&#xff01;如果大家有工作机会&#xff0c;希望帮小蒋内推一下&#x…...

MySQL索引的性能优化

1.数据库服务器的优化步骤 在数据库调优中&#xff0c;我们的目标就是响应时间更快&#xff0c;吞吐量更大。利用宏观的监控工具和微观的日志分析可以帮我们快速找到调优的思路和方式 数据库服务器的优化步骤 当我们遇到数据库调优问题的时候&#xff0c;该如何思考呢&#xf…...

协方差详解及在日常生活中的应用实例——天气温度与冰淇淋销量的关系

协方差详解及在日常生活中的应用实例——天气温度与冰淇淋销量的关系 文章目录 协方差详解及在日常生活中的应用实例——天气温度与冰淇淋销量的关系引言协方差的概念与背景数学公式推导实例背景数据收集计算过程结果解释计算相关系数为什么使用协方差&#xff1f;结论商业启示…...

Spring Boot3.3.X整合Mybatis-Plus

前提说明&#xff1a; 项目的springboot版本为&#xff1a;<version>3.3.2</version> 需要整合的mybatis-plus版本&#xff1a;<version>3.5.7</version> 废话不多说&#xff0c;开始造吧 1.准备好数据库和表 2.配置全局文件application.properti…...

快速了解软件测试——测试用例的方法

测试用例的编写方法有八种&#xff0c;其中等价类、边界值、判定表、场景法、流程图重要且使用得多 ●等价类●边界值●判定表●因果图[了解]●正交法[了解]●场景法●流程图●错误推测法[了解] 1、等价类 为什么要用等价类划分法? ●从大量数据中划分范围(等价类),然后从每…...

多线程、多进程,还是异步?-- Python 并发 API 如何选择

如何选择正确的 Python 并发 API模块 &#xff1f; Python 标准库提供了三种并发 API &#xff0c; 如何知道你的项目应该使用哪个 API&#xff1f; 在本教程将带逐步了解各API的特性、区别以及各自应用场景&#xff0c;指导你选择最合适的并发 API。 多线程、多进程&#xff0…...

汽车服务管理系统 _od8kr

TOC springboot580汽车服务管理系统 _od8kr--论文 系统概述 该系统由个人管理员和员工管理&#xff0c;用户三部分组成。其中&#xff1a;用户进入系统首页可以实现首页&#xff0c;热销汽车&#xff0c;汽车配件&#xff0c;汽车资讯&#xff0c;后台管理&#xff0c;在线客…...

带你玩转小程序推广,实现短链接一键跳转

不知道各位有没有想过&#xff0c;短链接直接跳转到微信小程序到底该怎么操作呢&#xff1f;掌握这个小技能&#xff0c;能让你的推广效率大幅提升哦。今天就给大家分享一个全新方法&#xff0c;教你如何从短链接直接跳转到微信小程序&#xff0c;实现高效的一键式跨越。 一、…...

OpenDDS的Rtps_Udp传输协议可靠性QoS收发基本流程

OpenDDS中,实现了Rtps_Udp传输协议(非纯udp)的可靠性传输。传输的线程包括: 1)发送方线程主要线程和定时器 《1》应用线程 《2》网络异步发送线程 《3》Heartbeat定时器 《4》Nak_response定时器 2)接收方主要线程和定时器 《1》网络异步接收线程 《2》heartbeat_respons…...

体育数据API纳米奥运会数据API:高阶数据包接口文档API示例⑦

纳米体育数据的数据接口通过JSON拉流方式获取200多个国家的体育赛事实时数据或历史数据的编程接口&#xff0c;无请求次数限制&#xff0c;可按需购买&#xff0c;接口稳定高效&#xff1b;覆盖项目包括足球、篮球、网球、电子竞技、奥运等专题、数据内容。 纳米数据API2.0版本…...

【中项第三版】系统集成项目管理工程师 | 第 15 章 组织保障

前言 本章的知识点预计上午会考1-2分&#xff0c;下午可能会考&#xff0c;一般与其他管理领域进行结合考查。学习要以教材为主。 目录 15.1 信息和文档管理 15.1.1 信息和文档 15.1.2 信息&#xff08;文档&#xff09;管理规则和方法 15.2 配置管理 15.2.1 基本概念 …...

数据结构——顺序栈和链式栈

目录 引言 栈的定义 栈的分类 栈的功能 栈的声明 1.顺序栈 2.链式栈 栈的功能实现 1.栈的初始化 (1)顺序栈 (2)链式栈 (3)复杂度分析 2.判断栈是否为空 (1)顺序栈 (2)链式栈 (3)复杂度分析 3.返回栈顶元素 (1)顺序栈 (2)链式栈 (3)复杂度分析 4.返回栈的大…...

PHP轻创推客集淘客地推任务平台于一体的综合营销平台系统源码

&#x1f680;轻创推客&#xff0c;营销新纪元 —— 集淘客与地推任务于一体的全能平台&#x1f310; &#x1f308;【开篇&#xff1a;营销新潮流&#xff0c;轻创推客引领未来】 在瞬息万变的营销世界里&#xff0c;你还在为寻找高效、全面的营销渠道而烦恼吗&#xff1f;&…...

three.js实现 加载3dtiles ,瓦片 ,倾斜摄影,功能

预览&#xff1a;https://z2586300277.github.io/three-cesium-examples/#/codeMirror?navigationThreeJS&classifyexpand&idloadTiles 部署站点预览&#xff1a;http://threehub.cn/ 开源地址&#xff1a;https://z2586300277.github.io/three-cesium-examples/#/e…...

Qt QTextEdit调用append数据重复的问题

使用QTextEdit写了个串口工具&#xff0c; 当串口有数据时通过一个signal传给slot&#xff0c;在 slot中调用QTextEdit的append(text)来增量显示串口数据&#xff0c;当串口关闭时调用clear()来清空显示。 结果发现append调用后显示的数据会有重复。 分析 分析代码&#xff0…...

数学基础(二)

一、导数 导数计算&#xff1a; 偏导数&#xff1a; 方向导数&#xff1a; 梯度&#xff1a; 函数在某点的梯度是一个向量&#xff0c;它的方向余方向导数最大值取得的方向一致。其大小正好是最大的方向导数 二、微积分 面积由来&#xff1a; 切线&#xff1a; 定积分&#x…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...