By Vika Zhou

更新日期:

文章目录
  1. 1. 安装Trunk
  2. 2. 基本用法
  3. 3. 配置
  4. 4. Trunk命令

在创建Yew项目的过程中使用了trunk工具，功能类似于nodejs项目中的webpack， 于是延伸学习了trunk的使用。

Trunk是用于构建、打包Rust WASM应用，并能发布为web项目。 支持基于wasm-bindgen的项目， 比如当前比较流行的Yew和Seed。请访问如下官方网址了解更多。

Trunk支持多种方式安装：

  1. 直接使用cargo命令来安装

    1
    cargo install --locked trunk

  2. Cargo binstall， 通过binstall从github下载已发布的release二进制文件

    1
    cargo binstall trunk

  3. 从Github release的版本下载压缩包后解压

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

Trunk会自动下载安装wasm-bindgen与wasm-opt, 所以不需要其他的安装步骤了。

基本用法

Trunk基于源码中的HTML文件来查找资源文件asset, 进而执行构建building与打包bundling流程。打包处理的资源文件asset要使用link标签， 包含data-trunk属性，且使用rel="{type}"来指定实际的类型。 Trunk默认会编译处理当前目录下的Cargo.toml。

1
<link data-trunk rel="{type}" href="{path}" ..other options here.. />

<link >支持的rel=类型有如下, 详情参考https://trunkrs.dev/assets/.

  • rust
  • sass，scss
  • css
  • tailwind-css
  • icon
  • inline
  • copy-file
  • copy-dir

简单起见，这里以单个html文件来了解下trunk处理过程，不包含Rust文件。关于Rust文件的处理，可尝试Yew框架。

1
2
mkdir -p trunk-test/web
cd trunk-test

在新建的文件夹trunk-test下创建一个index.html文件，内容如下。head中link标签指向css文件。

1
2
3
4
5
6
7
8
9
<!doctype html>
<html lang="en">
    <head>
        <link data-trunk rel="css" href="web/global.css" />
    </head>
    <body>
            <div class="main">hello world!</div>
    </body>
</html>

新建web/global.css文件， 内容如下, 只定义一个.main样式类，文字颜色为红。

1
2
3
.main {
        color: #ff0000;
}

接下来，在trunk-test目录下执行trunk build, 生成的构建结果文件将出现在dist目录下。可以看到css文件名后添加了hash串， dist/index.html中link标签下的内容也被替换了

trunk-build log

1
2
3
4
5
6
7
$ cat dist/index.html
<!DOCTYPE html><html lang="en"><head>
	<link rel="stylesheet" href="/global-b5b8b3f40f9fbaa1.css" integrity="sha384-rE3AOiFtV4rLfmvktjfhD7Rlx-eSWNSd6h7tlX8f3IFL0z2SnKeF7AqbXwvenZ_x">
    </head>
    <body>
	    <div class="main">hello world!</div>
</body></html>

然后执行trunk serve, 将启动一个web进程，打开浏览器访问http://localhost:8080/, 可以看到一个红色的hello world， 说明css中的内容生效了。 这流程， 就像第一次使用webpack打包一个web项目。

trunk-serve-log

trunk-serve-view

配置

Trunk支持多个层级的配置: 项目默认配置、Trunk.toml、环境变量、命令行参数。 命令行参数的优先级最高。

  1. 配置文件Trunk.toml中指定serve运行时的端口：

    1
    2
    [serve]
    port=9000

  2. 环境变量中指定端口：TRUNK_SERVE_PORT=80， 固定以TRUNK_开始，形式为TRUNK_<SECTION>_<ITEM>。

  3. 命令行参数指定： trunk serve –port=80

Trunk命令

  • trunk build 执行cargo build生成wasm32目标，在生成的WASM的基础上执行wasm-bindgen， 并且启动构建流水线执行index.html中定义的asset资源文件。
  • trunk watch 类似于trunk build, 会监控文件系统上文件的变化，有变更时触发构建流水线。
  • trunk serve 类似于trunk watch， 会启动web服务器。
  • trunk clean 清理生成的文件。
  • trunk config show 打印Trunk当前的配置。
文章目录
  1. 1. 安装Trunk
  2. 2. 基本用法
  3. 3. 配置
  4. 4. Trunk命令