最小コードを書いてビルドし実行して結果が正しいことを確認した。
成果物
前回まで
やってみる
1. プロジェクトを作る
テンプレートからプロジェクトを作成する。
cargo generate --git https://github.com/rustwasm/wasm-pack-template
プロジェクト名を問われるので適当にhello-wasm
とした。
🤷 Project Name : hello-wasm
プロジェクトのディレクトリが作成される。カレントディレクトリをそこへ移動する。
cd hello-wasm
2. ビルドする
wasm-pack build
./pkg
配下にhello_wasm_bg.wasm
ファイルができているはず。ファイル名が謎。-
が_
になっていたり_bg
がついていたり。
エラーになった
Installed package `wasm-bindgen-cli v0.2.78` (executables `wasm-bindgen`, `wasm-bindgen-test-runner`, `wasm2es6js`) warning: be sure to add `/home/pi/.cache/.wasm-pack/.wasm-bindgen-cargo-install-0.2.78/bin` to your PATH to be able to run the installed binaries Error: no prebuilt wasm-opt binaries are available for this platform: Unrecognized target! To disable `wasm-opt`, add `wasm-opt = false` to your package metadata in your `Cargo.toml`.
以下を参考にしてCargo.tomlに追記した。
[package.metadata.wasm-pack.profile.release] wasm-opt = false
再ビルドする。
wasm-pack build
成功。
[INFO]: :-) Your wasm pkg is ready to publish at /tmp/work/hello-wasm/pkg.
3. WEBアプリを作る
npm init wasm-app www
cd www
npm install
3-1. www/package.json
{ ... "devDependencies": { "hello-wasm": "file:///tmp/work/hello-wasm/pkg", // 追記 ... } }
3-2. www/index.js
//import * as wasm from "hello-wasm-pack"; import * as wasm from "hello-wasm"; wasm.greet();
4. ローカルサーバで実行確認する
npm start
ブラウザでhttp://localhost:8080/
にアクセスする
Hello, hello-wasm!
というアラート表示がされたら成功。
所感
できた。とりあえず呼び出すことができただけ。
他にも確認したいことは山ほどある。でもあとは都度調べてやればいいか。
- 引数や戻り値がある関数の定義と呼出
- npmでなくCDN風に使う方法
- 他のJavaScript APIを呼び出したい(
customeElements()
等)
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
$ uname -a Linux raspberrypi 5.10.52-v7l+ #1441 SMP Tue Aug 3 18:11:56 BST 2021 armv7l GNU/Linux