Project Setup

Rust

首先 ，你需要安装 Rust 。如何安装 Rust 和 cargo 构建工具，请参考官方说明。

Wasm 构建工具

需要安装额外的工具以方便 WebAssembly 与 JavaScript 间的相互操作。此外，根据你选择的工具，他们可以生成所有必需的 JavaScript 包装代码来让你的应用程序中的 .wasm 文件运行在浏览器中，从而帮助减轻部署和打包的麻烦。

wasm-pack

一个由 Rust / Wasm 工作组开发的用于打包 WebAssembly 的 CLI 工具。与 Webpack 的 wasm-pack-plugin 插件搭配使用最佳。

开始使用 wasm-pack

wasm-bindgen

同时是一个库和一个 CLI 工具，也是由 Rust / Wasm 工作组开发。它是一个促进 JS 和 WebAssembly 之间互操作性的底层工具（在 wasm-pack 内部被用到）。我们不建议直接使用 wasm-bindgen 因为它需要手写一些 JavaScript 代码来引导你的 WebAssembly 二进制程序。但是，直接使用它也是可能的并且可以在 wasm-bindgen 指南 上找到更多信息。

开始使用 wasm-bindgen

cargo-web

在 wasm-pack 和 wasm-bindgen 被介绍前的首选 web 工作流工具。它仍然是最快捷的启动和运行方式，值得安装以运行尚未迁移到支持 wasm-pack 的示例程序。

开始使用 cargo-web

对比

wasm-packwasm-bindgencargo-web
项目状态由 Rust / Wasm 工作组积极维护由 Rust / Wasm 工作组积极维护超过六个月没有 Github 活动
开发体验接近完美！需要 webpack 以获得最佳体验。比较基础。你需要编写一些脚本来简化你的开发体验。管用！自带“电池”，不需要外部依赖。
本地服务器通过 webpack 插件支持不支持支持
根据本地更改自动重新构建通过 webpack 插件支持不支持支持
无头浏览器测试支持支持支持
支持生成的目标代码
  • wasm32-unknown-unknown
  • wasm32-unknown-unknown
  • wasm32-unknown-unknown
  • wasm32-unknown-emscripten
  • asmjs-unknown-emscripten
web-sys兼容兼容不兼容
stdweb兼容兼容兼容
示例用法新手模板Yew 示例程序的构建脚本Yew 示例程序的构建脚本