构建、打包和发布你的 Rust WASM 应用程序到 Web

“收拾好你的东西，我们要去冒险啦！”
~ Ferris

Star
Discord Chat Number of downloads
了解更多 ⇩
开始入门
- 安装
- 附加工具
- 应用设置
下一步
贡献
许可
概述

Trunk 是一个用于 Rust 的 WASM Web 应用程序打包工具。 Trunk 使用一个简单的、可选配置的模式，通过源 HTML 文件来构建和打包 WASM、JS 代码片段和其他资源（图片、css、scss）。

开始入门

安装

首先，通过以下选项之一安装 Trunk。

纯 cargo

下载源代码并自行构建

cargo install --locked trunk

您还可以使用 --features 标志来切换某些功能

rustls
使用 rustls 处理客户端和服务器套接字
native-tls (默认)
启用系统原生 TLS 堆栈用于客户端套接字，并使用 openssl 用于服务器套接字
update_check (默认)
启动时启用更新检查

注意： 如果同时启用 rustls 和 native-tls，将使用 rustls。您可以使用 --no-default-features 禁用默认的 rustls。

Cargo binstall

您可以通过 binstall 从 GitHub releases 下载已发布的二进制文件。

cargo binstall trunk

GitHub 发布版本下载

从发布页面获取并解压已发布的二进制文件。

例如（请务必检查最新版本）

wget -qO- https://github.com/trunk-rs/trunk/releases/download/0.17.10/trunk-x86_64-unknown-linux-gnu.tar.gz | tar -xzf-

NixOS

nix-env -i trunk

Brew

brew install trunk

附加工具

任何附加工具，如 wasm-bindgen 和 wasm-opt，都会由 Trunk 自动下载和管理。因此，无需其他步骤 🎉。

注意： 在 wasm-bindgen 为 Apple M1 提供预构建二进制文件之前，M1 用户需要手动安装 wasm-bindgen。

cargo install --locked wasm-bindgen-cli

应用设置

任何基于 wasm-bindgen 的框架都可以在 Trunk 中工作。如果您是 Rust 前端开发 的新手，Yew 和 Leptos 是两个流行的选择。

确保您的应用程序正确启动的最简单方法是将您的应用程序设置为可执行文件，并包含标准的 main 函数

fn main() {
    // ... your app setup code here ...
}

Trunk 使用源 HTML 文件来驱动所有资源构建和打包。 Trunk 也使用官方的 dart-sass，所以让我们从以下示例开始。 将此 HTML 复制到您项目仓库的根目录，并命名为 index.html

<html>
  <head>
    <link data-trunk rel="scss" href="path/to/index.scss"/>
  </head>
</html>

trunk build 将在 dist/index.html 生成以下 HTML，以及编译后的 scss、WASM 和 WASM 的 JS 加载器

<html>
  <head>
    <link rel="stylesheet" href="/index-c920ca43256fdcb9.css">
    <link rel="preload" href="/index-7eeee8fa37b7636a_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
    <link rel="modulepreload" href="/index-7eeee8fa37b7636a.js">
  </head>
  <body>
    <script type="module">
      import init, * as bindings from '/index-7eeee8fa37b7636a.js';
      window.wasmBindings = bindings;
      init('/index-7eeee8fa37b7636a_bg.wasm');
    </script>
  </body>
</html>

您的 dist 目录的内容现在可以部署到 Web 上了。

下一步

不止于此！ Trunk 还有更多有用的功能。请前往以下章节，详细了解如何有效地使用 Trunk。

贡献

欢迎任何人贡献代码！ 请查看 CONTRIBUTING.md 文档以获取更多详细信息。 最好的入门方式是找到一个开放的 issue，然后开始着手实现它。 让其他人知道您正在处理它并分享进度是一个好方法。 尽早并经常打开 pull request，并请使用 GitHub 的草稿 pull request 功能。

许可

license badge
trunk 在 MIT 许可证或 Apache 许可证 2.0 的条款下获得许可，您可以选择其一。