Rust静态网站生成工具Trunk的使用，Trunk简化WebAssembly和前端资源构建部署流程

Rust静态网站生成工具Trunk的使用，Trunk简化WebAssembly和前端资源构建部署流程

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

主要特性

  • 📦 开发服务器 - Trunk内置服务器用于快速开发工作流，并支持HTTP和WebSocket代理
  • 🏗 变更检测 - Trunk监视应用程序的更改并触发构建，包括自动浏览器重新加载

安装方法

# 使用cargo安装（从crates.io编译）
cargo install trunk --locked

# 或者从最新git提交编译
cargo install --git https://github.com/trunk-rs/trunk trunk

# 或者使用Homebrew安装
brew install trunk

完整示例demo

下面是一个使用Trunk构建Rust WASM应用的完整示例：

  1. 首先创建一个新的Rust项目：
cargo new --lib my-wasm-app
cd my-wasm-app
  1. 修改Cargo.toml文件：
[package]
name = "my-wasm-app"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
  1. 创建index.html文件：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My WASM App</title>
    <link data-trunk rel="css" href="styles.css">
</head>
<body>
    <script type="module">
        import init from './my-wasm-app.js';
        init().then(() => {
            console.log("WASM loaded!");
        });
    </script>
</body>
</html>
  1. 创建styles.css文件：
body {
    font-family: sans-serif;
    margin: 2rem;
    background-color: #f5f5f5;
}
  1. 修改src/lib.rs文件：
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

#[wasm_bindgen(start)]
pub fn run() {
    console_log::init().expect("error initializing logger");
    log!("WASM module loaded");
}
  1. 运行Trunk开发服务器：
trunk serve

这将启动开发服务器，自动构建WASM应用并在浏览器中打开。当你修改代码时，Trunk会自动重新构建并刷新浏览器。

构建生产版本

trunk build --release

生产构建会优化WASM和前端资源，输出到dist目录。

许可证

Trunk采用MIT或Apache-2.0许可证。


1 回复

Rust静态网站生成工具Trunk的使用指南

什么是Trunk？

Trunk是一个Rust生态中的静态网站生成工具，专门为构建和部署WebAssembly(Wasm)应用和前端资源而设计。它简化了从Rust代码到Web部署的整个流程，特别适合使用Rust开发前端应用的场景。

主要特性

  • 自动构建Rust项目为WebAssembly
  • 内置开发服务器支持热重载
  • 处理CSS、SASS等前端资源
  • 支持HTML模板处理
  • 自动优化生产构建
  • 与wasm-bindgen和wasm-pack良好集成

安装方法

首先确保已安装Rust工具链，然后运行：

cargo install trunk

基本使用方法

1. 创建新项目

cargo new --lib my-wasm-app
cd my-wasm-app

2. 修改Cargo.toml

确保你的Cargo.toml包含以下内容：

[lib]
crate-type = ["cdylib"]  # 指定为动态库类型，用于Wasm编译

[dependencies]
wasm-bindgen = "0.2"  # 添加wasm-bindgen依赖

3. 创建index.html

在项目根目录创建index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Trunk Example</title>
</head>
<body>
    <script type="module">
        // 导入并初始化Wasm模块
        import init from './my-wasm-app.js';
        init();
    </script>
</body>
</html>

4. 开发模式运行

trunk serve

这会启动开发服务器，默认在http://localhost:8080。

5. 生产构建

trunk build --release

构建结果会输出到dist目录。

高级配置

Trunk.toml配置文件

可以创建Trunk.toml来自定义构建：

[build]
target = "index.html"  # 指定入口HTML文件
dist = "dist"          # 输出目录
release = false        # 默认开发模式

[build.watch]
ignore = ["target/*", "dist/*"]  # 忽略监视的目录

添加CSS/SASS支持

<!-- 在HTML中链接SASS文件 -->
<link data-trunk rel="scss" href="styles/main.scss"/>

使用Rust前端框架示例

如果你使用yew框架：

use yew::prelude::*;

// 定义App组件
#[function_component(App)]
fn app() -> Html {
    html! {
        <h1>{"Hello Trunk!"}</h1>
    }
}

fn main() {
    // 启动Yew应用
    yew::Renderer::<App>::new().render();
}

然后修改index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Yew + Trunk</title>
</head>
<body>
    <!-- Yew会自动挂载到body -->
</body>
</html>

部署

构建后的dist目录可以直接部署到任何静态网站托管服务。

常见命令

  • trunk serve: 启动开发服务器
  • trunk build: 构建项目
  • trunk watch: 监视文件变化并自动重建
  • trunk clean: 清理构建产物

完整示例Demo

下面是一个完整的Trunk项目示例：

  1. 项目结构：
my-wasm-app/
├── Cargo.toml
├── Trunk.toml
├── index.html
├── src/
│   └── lib.rs
└── styles/
    └── main.scss
  1. Cargo.toml:
[package]
name = "my-wasm-app"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
yew = "0.20"
  1. src/lib.rs:
use wasm_bindgen::prelude::*;
use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    html! {
        <div class="container">
            <h1>{"欢迎使用Trunk!"}</h1>
            <p>{"这是一个使用Rust构建的WebAssembly应用"}</p>
        </div>
    }
}

#[wasm_bindgen(start)]
pub fn run_app() {
    yew::Renderer::<App>::new().render();
}
  1. index.html:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Trunk完整示例</title>
    <link data-trunk rel="scss" href="styles/main.scss"/>
</head>
<body>
</body>
</html>
  1. styles/main.scss:
$primary-color: #3498db;

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    
    h1 {
        color: $primary-color;
    }
}
  1. Trunk.toml:
[build]
target = "index.html"
dist = "dist"
release = false

要运行这个示例：

cargo install trunk
trunk serve
回到顶部