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

【Rust WebAssembly 入门实操遇到的问题】

Rust WebAssembly 入门实操遇到的问题

  • 什么是WebAssembly
  • 跟着教程走
  • wasm-pack build error
  • 总结


什么是WebAssembly

WebAssembly(简称Wasm)是一种基于堆栈的虚拟机的二进制指令
格式。Wasm 被设计为编程语言的可移植编译目标,支持在 Web 上部
署客户端和服务器应用程序。

简而言之,WebAssembly(wasm)是一种可以执行在堆栈虚拟机的二进制可执行指令集(所以在你编译后将看到后缀为wasm的二进制文件,这种文件可以运行在Wasm Runtime 上),一般的,市面上常见的浏览器均支持wasm Runtime。由此也可以看出,只要有Runtime在,wasm可以运行在任何结构的硬件上,这也为wasm在更多领域中发挥作用提供了可能。


跟着教程走

wasm tutorial 提供了完整的,从安装Rust环境到编译pkg,再到运行服务调用wasm的整个教程,初学者可以跟着教程走一遍有一个大概的感受。在学习教程的过程中会遇到一些问题,以下是我遇到的问题,作为个人整理和分享。

wasm-pack build error

在这里插入图片描述
根据教程上的步骤,执行

wasm-pack build

会自动生成pkg文件夹以及相关的文件,不过在这里我遇到了下面的问题:
在这里插入图片描述
报错显示我无法使用stable版本的rust使用示例工程中的attribute,难道我需要使用nightly版本吗?但是官方文档并没有要求这样做,回顾以下我们跟着文档都做过什么,发现cargo.toml中官方给到的wasm-bindgen 版本和我们真正使用到的版本不同,
官方是0.2.84,而我们使用的是0.2.97(当前最新),或许问题出在这里:

[dependencies]
wasm-bindgen = ">=0.2.87 , < 0.2.88"

如果我们像唯一确定一个版本使用,可以如上述写法,而默认的:

[dependencies]
wasm-bindgen = "0.2.84"

cargo的默认行为会拉取最大子集中最新的版本,因为wasm-bindgen目前还是0.xx.xx版本,非稳定版本,所以为了避免发生不必要的问题,尽量控制版本统一,好,控制完版本后重新运行:

wasm-pack build

发生了新的问题:

[INFO]: ⬇️  Installing wasm-bindgen... 

我们的编译进程停止在这了,看到提示是正在安装wasm-bindgen,wasm-pack并没有正确获知我们已经安装了wasm-bindgen,同样的问题别人已经遇到过了,我们需要安装wasm-bindgen-cli :

cargo install wasm-bindgen-cli --version 0.2.87

需要保证的是,wasm-bindgen-cli与wasm-bindgen版本要一致,好的,我们继续编译,发现不会再停在安装wasm-bindgen上,而是又出现了新的问题:
在这里插入图片描述
生成的文件夹中没有package.json文件,没有这个文件,再后续的启动环节中,无法找到对应的wasm包,通过问题排查,发现需要手动在cargo.toml中添加:

[package.metadata.wasm-pack.profile.release]
wasm-opt = false

至此,问题就全部解决了,跟着教程启动服务后,访问服务器便可以看到alert弹窗了。


总结

官方文档通常是我们接触技术最直接最安全的文档,但是或许因为迭代之类的问题官方文档会忽略一些细节问题,这就需要开发者收集整理继而解决自己的问题。

相关文章:

【Rust WebAssembly 入门实操遇到的问题】

Rust WebAssembly 入门实操遇到的问题 什么是WebAssembly跟着教程走wasm-pack build error总结 什么是WebAssembly WebAssembly&#xff08;简称Wasm&#xff09;是一种基于堆栈的虚拟机的二进制指令 格式。Wasm 被设计为编程语言的可移植编译目标&#xff0c;支持在 Web 上部…...

掌握CMake中的变量:设置、使用及实际应用示例详解

掌握CMake中的变量&#xff1a;设置、使用及实际应用示例详解 在CMake中&#xff0c;变量的设置和使用是管理构建配置的核心部分&#xff0c;它使得项目配置更加灵活和动态。变量在CMake中用于保存各种数据&#xff0c;如路径、选项值或文件列表&#xff0c;可以在整个CMake配…...

React基础知识三 router路由全指南

现在最新版本是Router6和Router5有比较大的变化&#xff0c;Router5和Router4变化不大&#xff0c;本文以Router6的写法为主&#xff0c;也会对比和Router5的不同。比较全面。 安装路由 npm i react-router-dom基本使用 有两种Router&#xff0c;BrowserRouter和HashRouter&…...

[VUE]框架网页开发02-如何打包Vue.js框架网页并在服务器中通过Tomcat启动

在现代Web开发中&#xff0c;Vue.js已经成为前端开发的热门选择之一。然而&#xff0c;将Vue.js项目打包并部署到生产环境可能会让一些开发者感到困惑。本文将详细介绍如何将Vue.js项目打包&#xff0c;并通过Tomcat服务器启动运行。 1. 准备工作 确保你的项目能够正常运行,项…...

k8s Quality of Service

文章目录 QoS 分类规则QoS 类别影响创建 QoS 分类的案例1. Guaranteed QoS 示例示例 YAML 文件&#xff1a; 2. Burstable QoS 示例示例 YAML 文件&#xff1a; 3. BestEffort QoS 示例示例 YAML 文件&#xff1a; 4. 混合 QoS 示例&#xff08;多个容器&#xff09;示例 YAML …...

顶刊算法 | 鱼鹰算法OOA-BiTCN-BiGRU-Attention多输入单输出回归预测(Maltab)

顶刊算法 | 鱼鹰算法OOA-BiTCN-BiGRU-Attention多输入单输出回归预测&#xff08;Maltab&#xff09; 目录 顶刊算法 | 鱼鹰算法OOA-BiTCN-BiGRU-Attention多输入单输出回归预测&#xff08;Maltab&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实…...

什么语言适合做 Serverless 开发?

随着云计算的普及&#xff0c;**无服务器架构&#xff08;Serverless Architecture&#xff09;**成为一种流行的开发模式&#xff0c;它使得开发者无需管理服务器基础设施&#xff0c;专注于编写应用逻辑。无服务器架构通常按需提供计算资源&#xff0c;能够灵活地扩展&#x…...

使用OpenCV和卡尔曼滤波器进行实时活体检测

引言 在现代计算机视觉应用中&#xff0c;实时检测和跟踪物体是一项重要的任务。本文将详细介绍如何使用OpenCV库和卡尔曼滤波器来实现一个实时的活体检测系统。该系统能够通过摄像头捕捉视频流&#xff0c;并使用YOLOv3模型来检测目标对象&#xff08;例如人&#xff09;&…...

【25春招前端八股文】——JS数据类型检测方式

检测数据类型 # typeof 总结&#xff1a;数组、对象、null都会被判断为object&#xff0c;其他判断都正确的类型。 可以检测基本数据类型null会检测为Object&#xff0c;因为null也是一个空的引用对象复杂数据类型只能检测function和Object 情况说明&#xff1a; 数组&#x…...

Kafka的学习路径规划

目录标题 1. 记&#xff08;记忆力&#xff09;Kafka核心概念Kafka关键配置 2. 懂&#xff08;理解力&#xff09;Kafka工作原理Kafka核心功能Kafka架构设计 3. 网&#xff08;知识网络&#xff09;技术栈整合用例和场景 4. 拓&#xff08;全面拓展&#xff09;学习材料多样化内…...

linux模拟试题

Linux 基础阶段考试笔试模拟试卷 审核人:王旺旺 一.填空题(每题 1 分,共 30 分) 1.验证 httpd 服务是否启动的命令是_______ 答:systemctl status httpd 或 netstat -anptl 或 ss -anpt 2.将目录 xxhf 下所有文件的所属组改为 user1 的命令是_______ 答:chown -R ,user1 …...

Qt-界面优化QSS

QSS介绍 先说下CSS&#xff1a; 在⽹⻚前端开发领域中, CSS 是⼀个⾄关重要的部分. 描述了⼀个⽹⻚的 "样式". 从⽽起到对⽹⻚美化的作⽤。 Qt 仿照 CSS 的模式, 引⼊了 QSS, 来对 Qt 中的控件做出样式上的设定 。 CSS的功能很强大&#xff0c;QSS要逊色一些&#…...

QT实战-qt各种菜单样式实现

本文主要介绍了qt普通菜单样式、带选中样式、带子菜单样式、超过一屏幕菜单样式、自定义带有滚动条的菜单样式&#xff0c; 先上图如下&#xff1a; 1.普通菜单样式 代码&#xff1a; m_pmenu new QMenu(this);m_pmenu->setObjectName("quoteListMenu"); qss文…...

深度学习基础03_BP算法(下)过拟合和欠拟合

目录 一、BP算法(下) 0、反向传播代码回顾 写法一&#xff1a; 写法二(更常用)&#xff1a; 1、BP中的梯度下降 1.数学描述 2.传统下降方式 3.优化梯度下降方式 指数加权平均 Momentum AdaGrad RMSProp Adam(常用) 总结 二、过拟合和欠拟合 1、概念 1.过拟合 …...

web vue 滑动选择 n宫格选中 九宫格选中

页面动态布局经常性要交给客户来操作&#xff0c;他们按时他们的习惯在同一个屏幕内显示若干个子视图&#xff0c;尤其是在医学影像领域对于影像的同屏显示目视对比显的更为重要。 来看看如下的用户体验&#xff1a; 设计为最多支持5行6列页面展示后&#xff0c;右侧的布局则动…...

Spring Boot整合EasyExcel

Spring Boot整合EasyExcel主要涉及到以下几个步骤&#xff1a; 1.添加EasyExcel依赖到Spring Boot项目的pom.xml文件中。 2.创建数据模型类&#xff0c;用于映射Excel文件中的数据。 3.编写读取和写入Excel的服务。 以下是一个简单的例子&#xff1a; 1.添加EasyExcel依赖 …...

微软表示不会使用你的 Word、Excel 数据进行 AI 训练

​微软否认使用 Microsoft 365 应用程序&#xff08;包括 Word、Excel 和 PowerPoint&#xff09;收集数据来训练公司人工智能 (AI) 模型的说法。 此前&#xff0c;Tumblr 的一篇博文声称&#xff0c;雷德蒙德使用“互联体验”功能抓取客户的 Word 和 Excel 数据&#xff0c;用…...

JavaScript(一)

1.JavaScript 基本使用 2.JavaScript简单事件 3.JavaScript修改样式 4.JavaScript数据类型 JavaScript和Java有什么关系 知识点一 JavaScript基本使用 JS写在哪 还有一种写在中间的&#xff0c;也就是<head>里面 JS一些注意事项 JS修改元素内容 #JS获取对象<…...

Day 32 动态规划part01

今天正式开始动态规划! 理论基础 无论大家之前对动态规划学到什么程度,一定要先看 我讲的 动态规划理论基础。 如果没做过动态规划的题目,看我讲的理论基础,会有感觉 是不是简单题想复杂了? 其实并没有,我讲的理论基础内容,在动规章节所有题目都有运用,所以很重要!…...

winform跨线程更新界面

前言&#xff1a; 大家好&#xff0c;我是上位机马工&#xff0c;硕士毕业4年年入40万&#xff0c;目前在一家自动化公司担任软件经理&#xff0c;从事C#上位机软件开发8年以上&#xff01;我们在开发C#程序的时候&#xff0c;有时候需要在非Ui主线程更新界面&#xff0c;为了…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...