RustでWebassembly作成、javascriptから読込む手順 #Rust #Webassembly

knaka Tech-Blog

2020年9月1日 14:32

■ 概要:

Rust　のインストール等は省略しますが、
Webassembly　の作成や、JSから呼び出す例となります。

■ 参考

https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_wasm

https://qiita.com/kamykn/items/371cba5487d3c7cea8aa

■ 環境

Rust
rustc 1.46.0
cargo 1.46.0
wasm-pack
ubuntu 16

■　準備など

・wasm-pack　追加

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

cargo install cargo-generate

・ubuntu 16 の場合、openssl　エラーで失敗したので。libssl-dev 追加しました

sudo apt-get install libssl-dev

・NGの場合、pkg-config　も追加

sudo apt-get install pkg-config

cargo generate --git https://github.com/rustwasm/wasm-pack-template

Project Name: プロジェクト名を入力 (例: wasm1)

npm install npm@latest -g

npm 更新。

・wasm-pack で、ビルド

wasm-pack build

pkg/ 下に、.wasm( Webassembly ) 等が、出力されます。

■ webpackで、読み込む準備

npm init wasm-app www

www/ が作成されます。

・webpack は、下記で操作できます
起動：
npm run start
ビルド:
npm run build

・一旦, npm install します　。webpack追加等

cd www

npm install

・npm link　を /pkg で実行

cd pkg
npm link

ここで、書き込みエラーの場合、sudo npm link
で、root権限で実行します

・www に、移動して npm link

npm link wasm1

node_modules/ に。リンク追加されます

・www/index.js　の修正、

import * as wasm from "wasm1";
wasm.greet();

作成した、WASMよみこみ greet() 関数を呼ぶ

・webpack起動

cd www
npm run start

・ http://localhost:8080/ で、起動でき
alert() 画面が、表示されます。

・上記の　wasm.greet()　が呼び出す, alertが表示されるようですね

■ webpackを使用しない場合

上記、webapack の場合で、手順が多めでしたので。HTMLから呼ぶ方法も。見つけましたので
追記します。python3 のサービスを使います。

・参考
https://rustwasm.github.io/docs/wasm-bindgen/examples/without-a-bundler.html

・build, --target=web に変更

wasm-pack build --target=web

・ index.html 、追加
script type="module"　、で読めるらしいです

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Hello wasm-pack!</title>
 </head>
 <body>
   <!-- Note the usage of `type=module` here as this is an ES6 module -->
   <script type="module">
     import init, * as wasm from './pkg/wasm1.js';
     async function run() {
       await init();
       wasm.greet();
     }
     run();
   </script>    
 </body>
</html>

・サーバ起動

python3  -m http.server 8082

この記事が気に入ったらサポートをしてみませんか？