0 介绍
视频地址:https://www.bilibili.com/video/BV1eg411g7c8
相关源码:https://github.com/anonymousGiga/Rust-and-Web-Assembly
1 环境安装
1、安装Rust工具链,可以参考https://www.rust-lang.org/tools/install
为了很好的使用Rust和WebAssembly,我们需要Rust 1.3以上的稳定版。
2、安装wasm-pack
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
3、安装cargo-generate
cargo install cargo-generate
4、安装npm
npm install npm@latest -g
2 再写hello world
2.1重新写hello world
之前我们有写过一个简单的使用webassembly的例子,今天我们继续写一个helloworld的例子。如果说之前的例子是自行车的话,那么今天的例子就是一辆小汽车,要高级一点,下面我们就正式开始。
1、下载模板
cargo generate --git https://github.com/rustwasm/wasm-pack-template
2、编译
wasm-pack build
3、将wasm放入网页
npm init wasm-app www
cd www
npm install
打开package.json,添加如下代码:
{
// ...
"dependencies": { // Add this three lines block!
"wasm-game-of-life": "file:../pkg"
},
"devDependencies": {
//...
}
}
修改index.js如下:
//import * as wasm from "hello-wasm-pack";
import * as wasm from "wasm-game-of-life";
wasm.greet();
安装:
npm install
4、启动测试
npm run start
打开浏览器输入http://localhost:8080
2.2 项目解释
上一节我们重新写了我们的helloworld,这一节我们就来解释一下项目中对应的文件。
2.2.1 Rust相关部分
此部分内容,之前学过Rust的小伙伴,会发现很熟悉。
- wasm-game-of-life/Cargo.toml
该文件中主要是Cargo相关的配置,编译的依赖等。
- wasm-game-of-life/src/lib.rs
具体的代码,可以发现和我们前一节的例子中的代码差不多。
- wasm-game-of-life/src/utils.rs
提供公用的工具,便于我们更方便的编译Rust到WebAssembly。
2.2.2 编译后的包
编译后生成Pkg目录,使用如下命令显示:
tree -l
输出如下:
pkg/
├── package.json
├── README.md
├── wasm_game_of_life_bg.js
├── wasm_game_of_life_bg.wasm
├── wasm_game_of_life_bg.wasm.d.ts
├── wasm_game_of_life.d.ts
└── wasm_game_of_life.js
- wasm_game_of_life_bg.wasm
.wasm文件是由Rust编译器生成的WebAssembly字节文件,里面就包含greet函数。
- wasm_game_of_life.js
js文件是由wasm bindgen生成的,用于将DOM和JavaScript函数导入Rust,并将一个API暴露给JavaScript的WebAssembly函数。
- *.d.ts
*.d.ts包含对JavaScript的相关的声明。
- package.json
package.json文件包含有关生成的JavaScript和WebAssembly包的元数据。npm和JavaScript捆绑包使用它来确定包、包名、版本和其它内容之间的依赖关系。它帮助我们与JavaScript工具集成,并允许我们将包发布到npm。