QUICKSTART-for-DEVELOPERS.org

Rust wasm-bindgen による開発のはじめかた

Rust wasm-bindgen による開発

環境構築

1. node のインストール

   curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
   nvm install node
       

2. wasm-pack のインストール ~/.cargo/bin/wasm-pack にバイナリをダウンロードする

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

3. cargo-generate のインストール

   cargo install cargo-generate
       

Wasm パッケージのプロジェクト作成 & ビルド

1. テンプレートから bomberhuman という名前で wasm プロジェクトを掘って，ビルドしてみる

   cargo generate --git https://github.com/rustwasm/wasm-pack-template --name bomberhuman
   cd bomberhuman
   export TOP=$(pwd)
   wasm-pack build
   ls -l pkg/
       

   pkg/ 以下に wasm が．pkg/ は Node の module になってる

Web ページ部分の作成

1. www/ 以下に Web ページ部分を作る

   cd $TOP
   npm init wasm-app www
   cd www
       

2. bomberhuman module が www から使えるように package.json に追加する

   --- www.orig/package.json 2020-10-13 16:06:48.561210994 +0900
   +++ www/package.json 2020-09-29 17:28:49.422320159 +0900
   @@ -27,7 +27,7 @@
      },
      "homepage": "https://github.com/rustwasm/create-wasm-app#readme",
      "devDependencies": {
   -    "hello-wasm-pack": "^0.1.0",
   +    "bomberhuman": "file:../pkg",
        "webpack": "^4.29.3",
        "webpack-cli": "^3.1.0",
        "webpack-dev-server": "^3.1.5",
       

3. pkg/ 以下に作った wasm パッケージを js 側に取り込む

   www/index.js の import を bomberhuman に変更

   --- www/index.js.orig
   +++ www/index.js
   @@ -1,3 +1,3 @@
   -import * as wasm from "hello-wasm-pack";
   +import * as wasm from "bomberhuman";
   
   -wasm.greet();
   +// wasm.greet();
       

4. node_modules/ に必要なパッケージをインストール

   cd $TOP/wwww
   npm install
       

5. npm で web サーバを立ち上げて確認

   cd $TOP/www
   npm run start -- --port 9000
   open http://localhost:9000/
       

6. webpack で deploy 可能な dist を作る

   cd $TOP/www
   npm run bulid
   ls -l dist/
       

   dist/ 以下を nginx 等でサーブできる

インクリメンタルな開発

cd $TOP
wasm-pack build
cd www
npm run build
npm run start -- --port 9000

• open http://localhost:9000

参考になるサイト

• Introduction - Rust and WebAssembly Game of Life のチュートリアル
  • rustwasm/wasm_game_of_life: A Rust and WebAssembly tutorial implementing the Game of Life
• Introduction - The `wasm-bindgen` Guide
  • web-sys, js-sys の話も書いてある
• aochagavia/rocket_wasm: The Rocket game, now compiling to WASM
• wasm-bindgen/lib.rs at master · rustwasm/wasm-bindgen wasm-bindgen/examples/webgl/src/lib.rs