wasmの入門記事を参考にサンプルを実装する上で、躓いた点を書いています。 今回asdfでrustをバージョン管理している場合に出てきた問題となります。
参考にしたもの
参考通りいかないもの
今回 asdfで管理してる言語バージョン 1.70.0のrustを利用した
wasm-packのインストールをcargoで行う
$ cargo install wasm-pack
プロジェクトの作成
cargo new --lib testwasm
参考通りCargo.toml,lib.rsを変更
Cargo.toml
[package]
name = "testwasm"
version = "0.1.0"
edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[lib]
crate-type=["cdylib"]
[dependencies]
wasm-bindgen="0.2"
lib.rs
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}
ビルドするとエラー
今回のテーマはこれ
wasm32-unknown-unknown target not found
$ wasm-pack build --target web
Error: wasm32-unknown-unknown target not found in sysroot: "/Users/***/.asdf/installs/rust/1.70.0/toolchains/1.70.0-x86_64-apple-darwin"
エラーメッセージ先を確認 参考
例えば1.70.0なら https://static.rust-lang.org/dist/rust-std-1.70.0-wasm32-unknown-unknown.tar.gz
でダウンロード、解凍したものを
$ rustc --print sysroot
> /Users/****/.asdf/installs/rust/1.70.0/toolchains/1.70.0-x86_64-apple-darwin
sysrootパスの lib/rustlib/ 配下に入れていく。具体的なパスは上記の参考を見て確認してください。
libを手動で移動させる事で無事 wasm-packでビルドができるようになります。
あとは htmlを作成して pkgの中身を読み込む事でrustで作成したwasmファイルを活用できます。
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>hello-wasm example</title>
</head>
<body>
This is Test
<script type="module">
import init, { add } from "./pkg/testwasm.js";
init()
.then(() => {
console.log(add(1, 3))
});
</script>
</body>
</html>
wasm化されたモジュールの活用
自分自身でwasm作成するのも良いですが、現状はそこまで開発コストはとれません。
Markdown wasmなど、かなり高速っぽいので、nodeのmarkedの代わりに変更も良いかもしれません。 markdow wasm
読み込み方は以下を参考にすると良いかもしれません。 wasmファイルの読み込みについて