MDN の wasm-bindgen の入門用チュートリアル "Hello, WebAssembly" の補足的なメモ
"Hello, WebAssembly"
- https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_wasm; MDN / WebAssembly / Rust から WebAssembly にコンパイルする
補足的なメモ
1. npm のアカウントとパッケージの公開は必要？
MDNの記事そのものではそこも含めたやり方の例として必要としていますが、本質的には不要です。 npm へ @mynpmusername/hello-wasm パッケージを公開せずにこのチュートリアルを進める場合は:
- 「パッケージの npm への発行」の直前までは記事の通り進めます
package.jsonのdependencies.@mynpmusername/hello-wasmをバージョン番号表記ではなく"file:./hello-wasm/pkg"のようにローカルファイルシステムからのパッケージ参照で記述しますnpm installまたはyarnすると他の依存パッケージ群と併せて@mynpmusername/hello-wasmも./hello-wasm/pkgからnode_modulesへ install されます- 続きは記事の通り進めます
2. webpack 使う必要ある？
Webサービスとしてデプロイする形態で動作確認してみたければ事実上必要です。
webpack-dev-serverすると index.js, node_modules の中身(hello-wasm/pkgからnode_modulesへinstallされた@mynpmusername/hello-wasmパッケージも含みます)を統合して開発用のhttpdをwebpack.config.jsの定義に従って起動してくれます。webpackを使わないとnode_modulesのパッケージ群が統合されないため一般的なhttpdで単純にディレクトリーを指定して起動しても期待動作しません。
hello-wasm を直接 Node.js のインタラクティブ・シェルで叩いて確認したいだけなら不要です。 WebAssemblyコードのロードと実行 - WebAssembly | MDN の fetch を Node.js の require('fs').readFileSync などに置き換えて .wasm ファイルをロードして WebAssembly.instantiate を叩けば .wasm のより原始的な動作確認も可能です。
3. 一般的なhttpdへデプロイしたい場合はどうするの？
npm run webpack または yarn webpack などすると webpack-cli パッケージの webpack コマンドにより ./dist へ一般的なhttpdへデプロイできるファイル群が生成されます。./dist に生成された中身とindex.htmlを同じディレクトリーで参照可能な配置を行い、httpd でホストすると期待動作します。たぶん。
例えばChromeで期待動作せず Console に↓のエラーが出ている場合はホストしている httpd が .wasm の MIME を正しく application/wasm で出力できていません。たぶん。うまいこと MIME を吐くように設定して下さい。
localhost/:1 Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
4. npm より yarn
どうぞお好きな方で大丈夫です。
