Using wasm-bindgen
安装
cargo install wasm-bindgen-cli
构建
首先构建将生成Wasm文件的应用程序。假设您是根据一个简单的应用的章节内容构建的。那么输出文件的路径为target/wasm32-unknown-unknown/debug/yew-app.wasm
。如果您将 crate 命名为其他名称,则 Wasm 文件的名称将不是yew-app.wasm
,而是您在Cargo.toml
文件中package.name
设置的名称。
cargo build --target wasm32-unknown-unknown
然后,运行 wasm-bindgen 的 CLI 。这个命令将在 --out-dir
所指定的目录中生成一组文件,其中包含应用程序编译后的 WebAssembly 和一个 JavaScript 包装器,该包装器将加载 Wasm 二进制文件并运行它。这是必要的,因为浏览器目前不能直接加载WebAssembly文件,而是需要通过 JavaScript 脚本加载它们。在一个简单的应用示例中,我们希望在 static
文件夹中生成文件(为此,您需要将 --out-dir static
作为参数传递给 wasm-bindgen
),而这两个文件会被命名为 wasm.js
和 wasm_bg.wasm
(您可以通过将 --out-name wasm
作为参数传递给 wasm-bindgen
)。
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