分享好友 编程语言首页 频道列表

全栈程序员的新玩具Rust(六)第一个WASM程序

rust文章/教程  2023-02-10 10:400

先上代码

https://gitee.com/lightsever/rust_study/tree/master/wasm_hello01


webassembly就不用再赘述了,耳朵里面快磨出茧子来了。

rustwasm是火狐自家的玩具,让我们来继续做实验,让rust飞起来吧。

环境安装

安装好rust环境之后仍然需要 一个 wasm 工具包

cargo install wasm-pack

然后如果想快速创建一个wasm项目模板可以用这个

cargo generate --git https://github.com/rustwasm/wasm-pack-template

WASM项目

生成后的项目代码如下

image

#[wasm_bindgen]就是告诉rust,这个函数要么是导出给js用的,要么希望从js那拿过来用的。

自然 alert是从js那拿过来用

greet是给js调用的


我们搞helloworld,这里就先不改了


这个项目用cargo 编译是生成不了wasm文件的

要在项目目录用

wasm-pack build

image

这样wasm就编译成功了

image

生成的项目是个npm包,自己生成了胶水代码,使用非常方便,但是要用webpack打包。

我自己npm都不熟练,我就不去搞这个了。

主要是不能接受暗藏玄机,我们要来搞一搞事情。

*之前了解不够透彻,这里补充一下

image

wasm-pack 有四个输出目标

我是分不清 browser 和 web 有什么区别,

但是这里有一个no-modules ,就是他,我们就是不想用打包系统

image

所以我写了一个批处理来生成这种js,这样的js我们就不需要改了,使用起来也更方便

后续也不要改动js项目了,使用也更加简单

image

后面的部分都不需要看了

JS项目

我用TS来搞这个项目,他生成的胶水代码是个npm包,所以直接放在网站项目里是不能用的,我们要来改一改。

你或许会有点疑惑都用WASM了?怎么还要写js代码?这是因为WASM不能完全替代js。他需要初始化,丢一些可以import的函数给WASM,要不然WASM啥也不能干。另外需要JS来调用WASM的某个函数,要不然WASM啥也不会干。

也就是说,主要是初始化和入口工作,这个工作可以一次性,然后整个网站的逻辑全部用wasm完成。

image

首先是胶水js,这个文件我们要做三处修改

1.首先

import * as wasm from …

这行删掉,这是告诉js从wasm导入一个模块,它会被打包程序替换,而我们不想用webpack

2.然后是底下有 export的两行

把export 和 const 关键字删除

image

这里是导入js函数给wasm的胶水代码,和导出wasm函数个js的胶水代码。

同理,原来都是 package系统用的东西

好了,改完了

但这样wasm从哪里来?

js在web环境所有的全局变量都是 window 的成员,这样我们随便从哪都能给他塞进去

然后是胶水的定义.d.ts

image

把export 改为 declare,这就成了一个不依赖打包就能使用的定义文件啦。

写我们的app.ts

image

爱用ts,你用js也差不多这样


1.加载 wasm文件 为 arraybuffer


2.实例化wasm对象

这里有个小花招,我们直接把window塞了进去,否则你就需要手工构造一个wasm导入的js胶水函数的字典。因为所有的全局对象都是windows的成员,而rustwasm帮我们生成的胶水代码都是全局定义的,直接丢window进去完事儿。


3.把全局的wasm对象给赋值了,这里直接window[“WASM”]这样塞进去了。


4.调用wasm入口函数


按照我们编写的rust代码,应该alert 出一个  hello peter.

image

诚不欺我。

入口函数和初始化函数一次写完就不用搞了。

以后只消生成wasm就是,当然胶水文件因为我们不是用rustwasm预设的配合webpack的用法,所以我们每次也要改改。但我们的改动其实很机械

1.js文件,有import的 整行删掉

2.js文件,export 开头的,删除 export 和 const关键字

3.d.ts 文件,export开头的,替换成 declare

回头写个脚本,自动办了就是。


今天有了helloworld,写个游戏,就不远了。

查看更多关于【rust文章/教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
Rust到底值不值得学--Rust对比、特色和理念
前言其实我一直弄不明白一点,那就是计算机技术的发展,是让这个世界变得简单了,还是变得更复杂了。当然这只是一个玩笑,可别把这个问题当真。然而对于IT从业者来说,这可不是一个玩笑。几乎每一次的技术发展,都让这个生态变得更为复杂。“英年早秃”已经成

0评论2023-03-08818

全栈程序员的新玩具Rust(三)板条箱
上次用到了stdout,这次我们来写一个更复杂一点的游戏rust的标准库叫做std,默认就会引入。这次我们要用到一个随机数函数,而随机数比较尴尬的一点是这玩意不在标准库中,我们要额外依赖一个库。很多编程方案都有自己的模块化库系统,rust也不例外,不过rust

0评论2023-02-10729

【Rust】标准库-Result rust数据库
环境Rust 1.56.1VSCode 1.61.2概念参考:https://doc.rust-lang.org/stable/rust-by-example/std/result.html示例main.rsmod checked {#[derive(Debug)]pub enum MathError {DivisionByZero,NonPositiveLogarithm,NegativeSquareRoot,}pub type MathResult =

0评论2023-02-09978

【Rust】标准库-引用 rust 数据库框架
环境Rust 1.56.1VSCode 1.61.2概念参考:https://doc.rust-lang.org/stable/rust-by-example/std/rc.html示例rust 使用 Rc 来实现引用计数。main.rsuse std::rc::Rc;fn main() {let rc_examples = "Rc examples".to_string();{println!("--- rc_a is created

0评论2023-02-09638

rust 打印当前时间
let now = time::now();let f_now = time::strftime("%Y-%m-%dT%H:%M:%S", now).unwrap();println!("now: {:?}", f_now);

0评论2023-02-09689

【Rust】线程 rust编程语言
环境Rust 1.56.1VSCode 1.61.2概念参考:https://doc.rust-lang.org/stable/rust-by-example/std_misc/threads.html示例main.rsuse std::thread;const N_THREADS: u32 = 10;fn main() {let mut children = vec![];for i in 0..N_THREADS {children.push(threa

0评论2023-02-09956

rust安装 rust安装在固态进不去游戏
http://blog.csdn.net/teamlet/article/details/50838996

0评论2023-02-09614

更多推荐