前端使用Rust分两种, 一种是仍然使用HTML, CSS, JavaScript开发前端, 加载Rust编译而成的.wasm文件使用其中的逻辑。
另一种是使用基于Rust的yew等框架开发前端。
这里记录第一种方法。
主要参考MDN

安装Rust

参考官网

安装wasm-pack

1
cargo install wasm-pack

编写Rust代码

新建项目

1
2
# 新建项目
cargo new --lib hello-wasm

修改代码

src/lib.rs

1
2
3
4
5
6
7
8
9
10
11
12
13
extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

Cargo.toml

1
2
3
4
5
6
7
8
9
[package]
name = "hello-wasm"
version = "0.1.0"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

构建包

1
wasm-pack build

使用包

本来想在原生JavaScript中使用, 但是失败了。先记录在webpack中使用, 后面再研究。

将生成的文件根据项目结构复制到目标文件夹, 在webpack项目中的js文件中引入生成的hello_wasm_pack.js即可看到执行结果。

1
2
3
4
5
6
7
const js = import("./wasm/hello_wasm_pack.js");
js.then(js => {
  js.greet("WebAssembly")
  console.log("js", js)
  console.log("js.add", js.add(111, 222))
});

其它

如果想进一步缩小文件大小, 可参考官方文档