archive-gh-me/yew
1
0
Fork 0
mirror of https://github.com/yewstack/yew.git synced 2025-12-08 21:26:25 +00:00
Code Issues Projects Releases Wiki Activity
yew/website/i18n/ja/docusaurus-plugin-content-docs/current/getting-started/project-setup/using-wasm-bindgen.md
Muhammad Hamza 10b67ea18c
Docusaurus v2 (#1872) 
* Docusaurus v2

* i18n

* Fix firebase hosting config
2021-05-26 22:32:07 +02:00

2.1 KiB
Raw Blame History

title
Using wasm-bindgen

インストール

cargo install wasm-bindgen-cli

ビルド

はじめに、Wasmファイルを生成するアプリをビルドしましょう。 サンプルアプリをビルドのアプリをビルドしたいとします。 生成されたファイルのパスはtarget/wasm32-unknown-unknown/debug/yew-app.wasmにあるはずです。 もしクレートに何か別の名前をつけた場合、Wasmファイルの名前はyew-app.wasmではなく、Cargo.tomlファイルに package.nameとして名前をつけたものになるでしょう。

cargo build --target wasm32-unknown-unknown

次に、wasm-bindgenのCLIを動かしましょう。 このコマンドは--out-dirのディレクトリにいくつかのファイルを生成し、その中にはWasmバイナリを読み込んで動かすための コンパイルされたWebAssemblyとJavaScriptのラッパーが入っています。 現在のブラウザは直接WebAssemblyファイルを読み込むことができないため、代わりにJavaScript経由で読み込まれるなければならず、 そのためにこれらのラッパーが必要となります。 [サンプルアプリを作る(../build-a-sample-app.md)の例ではstaticフォルダにファイルが生成されるようにしており (そのためにwasm-bindgenへ--out-dir staticと渡す必要があります)、 wasm.jsとwasm_bg.wasmという名前になります(wasm-bindgenへ--out-name wasmと渡すことで実現できます)

wasm-bindgen --target web --out-dir static --out-name wasm target/wasm32-unknown-unknown/debug/appname.wasm --no-typescript

アプリをサーブする

好きなサーバーを使ってください。 ここではシンプルなPythonのサーバーを使います。

python -m http.server 8000

サポートされているターゲット

  • wasm32-unknown-unknown

参考ドキュメント