项目设置

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

开始使用 cargo-web

对比

wasm-pack wasm-bindgen cargo-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 示例程序的构建脚本