rust语言编写wasm简单例子

rust的wasm使用wasm-pack来build，有很多选项和target用于不同的目的，本文描述一个最简单的示例，不使用webpack和npm，让你可以快速入门和了解。

全局安装 wasm-pack

cargo install wasm-pack --no-default-features # 忽略 OpenSSL

实例代码

extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;

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

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

编译打包，

wasm-pack build --target web

如果编译失败时，可以安装wasm-bindgen-cli试试

cargo install wasm-bindgen-cli

浏览器中js调用

import('./hello_wasm.js').then(async m => {
    await m.default()
    m.messagebox('hello')
})

cargo.toml参考

[package]
name = "wasmdem"
version = "0.1.0"
authors = ["nnsword <coolmoonf@163.com>"]
edition = "2018"

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

[features]
default = ["console_error_panic_hook"]

[dependencies]
wasm-bindgen = "0.2.63"

# The `console_error_panic_hook` crate provides better debugging of panics by
# logging them with `console.error`. This is great for development, but requires
# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
# code size when deploying.
console_error_panic_hook = { version = "0.1.6", optional = true }

# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
# compared to the default allocator's ~10K. It is slower than the default
# allocator, however.
#
# Unfortunately, `wee_alloc` requires nightly Rust when targeting wasm for now.
wee_alloc = { version = "0.4.5", optional = true }

[dev-dependencies]
wasm-bindgen-test = "0.3.13"

[profile.release]
# Tell `rustc` to optimize for small code size.
opt-level = "s"


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

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