资产

声明要由 Trunk 处理的资产非常简单且可扩展。

所有要由 Trunk 处理的链接资产必须遵循以下三个规则

  • 必须声明为有效的 HTML link 标签。
  • 必须具有属性 data-trunk。
  • 必须具有属性 rel="{type}"，其中 {type} 是下面列出的资产类型之一。

这通常看起来像这样：<link data-trunk rel="{type}" href="{path}" ..其他选项.. />。下面描述的每种资产类型都指定了其资产类型所需的和可选的属性。所有 <link data-trunk .../> HTML 元素都将被关联管道的输出 HTML 替换。

rust

✅ rel="rust"：Trunk 将编译指定的 Cargo 项目为 WASM 并加载它。这是可选的。如果未指定，Trunk 将在源 HTML 文件的父目录中查找 Cargo.toml。

  • href:（可选）Rust 项目的 Cargo.toml 的路径。如果指定了目录，则 Trunk 将在给定目录中查找 Cargo.toml。如果未指定值，则 Trunk 将在源 HTML 文件的父目录中查找 Cargo.toml。
  • data-target-name:（可选）要加载的目标工件的名称。如果 Cargo 项目有多个目标（二进制文件和库），则可以使用此值来选择应使用哪个目标。
  • data-bin:（可选）要编译和加载的二进制文件的名称。如果 Cargo 项目有多个二进制文件，则可以使用此值来指定应编译 (使用 --bin) 并由 trunk 使用特定的二进制文件。这隐式地包含了 data-target-name。
  • data-type:（可选）指定二进制文件应如何加载到项目中。可以设置为 main 或 worker。main 是默认值。只能有一个 main 链接。对于 worker，将创建一个 wasm-bindgen javascript 包装器和 wasm 文件（带有 _bg.wasm 后缀），以二进制名称（如果提供）或项目名称命名。请参阅其中一个 webworker 示例，了解如何加载它们。
  • data-cargo-features:（可选）要激活的 cargo features 的空格或逗号分隔列表。
  • data-cargo-no-default-features:（可选）禁用默认的 Cargo features。
  • data-cargo-all-features:（可选）启用所有 Cargo features。
    • 与 data-cargo-features 和 data-cargo-no-default-features 都不兼容。
  • data-wasm-opt:（可选）使用设置的优化级别运行 wasm-opt。可能的值为 0、1、2、3、4、s、z 或 *空值* 表示 wasm-opt 的默认值。将此选项设置为 0 以显式禁用 wasm-opt。值 1-4 是速度越来越快的优化级别。s 和 z（z 表示更多优化）则针对二进制文件大小进行优化。仅在 --release 模式下使用。
  • data-wasm-opt-params:（可选）使用附加参数运行 wasm-opt。仅在 --release 模式下使用。
  • data-keep-debug:（可选）指示 wasm-bindgen 在最终 WASM 输出中保留调试信息，即使在 --release 模式下也是如此。这可能与 wasm-opt 的使用冲突，因此为了确保万无一失，建议在使用此选项时将 data-wasm-opt="0" 设置为 0。
  • data-no-demangle:（可选）指示 wasm-bindgen 不对 Rust 符号名称进行 demangle。
  • data-reference-types:（可选）指示 wasm-bindgen 启用 reference types。
  • data-weak-refs:（可选）指示 wasm-bindgen 启用 weak references。
  • data-typescript:（可选）指示 wasm-bindgen 输出 Typescript 绑定。默认为 false。
  • data-bindgen-target:（可选）指定 wasm-bindgen flag --target 的值（有关可能的值，请参见链接）。默认为 no-modules。主要用例是切换到 web 和 data-type="worker"，这降低了向后 兼容性，但有一些 优点。
  • data-loader-shim:（可选）指示 trunk 为 web workers 创建一个 loader shim。默认为 false。
  • data-cross-origin:（可选）加载代码和脚本资源时的 crossorigin 设置。默认为 plain anonymous。
  • data-integrity:（可选）代码和脚本资源的 integrity 摘要类型。默认为 plain sha384。
  • data-wasm-no-import:（可选）默认情况下，Trunk 将生成从 Rust 导出的函数的导入。启用此标志将禁用此功能。默认为 false。
  • data-wasm-import-name:（可选）全局变量的名称，从 WASM 导入的函数将在该变量下可用（在 window 对象下）。默认为 wasmBindings（这使它们可以通过 window.wasmBindings.<functionName> 访问）。
  • data-target-path:（可选）输出放置在 dist 目录内的路径。如果不存在，则该目录放置在 dist 根目录中。路径必须是相对路径，且不包含 ..。
  • data-initializer:（可选）initializer 的（模块）JavaScript 文件的路径。
  • data-cargo-profile:（可选）要使用的 cargo profile，而不是默认的，用于 release 或 dev 模式。
  • data-cargo-profile-release:（可选）要使用的 cargo profile，而不是默认的，用于 release 模式。覆盖 data-cargo-profile 设置。
  • data-cargo-profile-dev:（可选）要使用的 cargo profile，而不是默认的，用于 dev 模式。覆盖 data-cargo-profile 设置。

sass/scss

✅ rel="sass" 或 rel="scss"：Trunk 使用官方的 dart-sass 进行编译。只需从源 HTML 链接到您的 sass 文件，Trunk 将处理其余的事情。此内容已进行哈希处理以进行缓存控制。href 属性必须包含在指向要处理的 sass/scss 文件的链接中。

  • data-inline:（可选）此属性将来自 SASS/SCSS 文件的编译后的 CSS 内联到 <style> 标签中，而不是使用 <link rel="stylesheet"> 标签。
  • data-integrity:（可选）代码和脚本资源的 integrity 摘要类型。默认为 plain sha384。
  • data-target-path:（可选）输出放置在 dist 目录内的路径。如果不存在，则该目录放置在 dist 根目录中。路径必须是相对路径，且不包含 ..。

css

✅ rel="css"：Trunk 将复制在源 HTML 中找到的链接的 css 文件，而无需内容修改。此内容已进行哈希处理以进行缓存控制。href 属性必须包含在指向要处理的 css 文件的链接中。

  • 将来，Trunk 将解析本地 @imports，将处理压缩（请参阅 trunk#7），我们甚至可能会研究一种模式，即源树中找到的任何 CSS 都将被捆绑，这将实现一种不错的零配置“组件样式”模式。有关更多详细信息，请参见 trunk#3。
  • data-integrity:（可选）代码和脚本资源的 integrity 摘要类型。默认为 plain sha384。
  • data-no-minify:（可选）选择不进行压缩。另请参阅：Minification。
  • data-target-path:（可选）输出放置在 dist 目录内的路径。如果不存在，则该目录放置在 dist 根目录中。路径必须是相对路径，且不包含 ..。

tailwind

✅ rel="tailwind-css"：Trunk 使用官方的 tailwindcss cli 进行编译。只需从源 HTML 链接到您的 tailwind css 文件，Trunk 将处理其余的事情。此内容已进行哈希处理以进行缓存控制。href 属性必须包含在指向要处理的 sass/scss 文件的链接中。

  • data-inline:（可选）此属性将来自 tailwind 编译的编译后的 CSS 内联到 <style> 标签中，而不是使用 <link rel="stylesheet"> 标签。
  • data-integrity:（可选）代码和脚本资源的 integrity 摘要类型。默认为 plain sha384。
  • data-no-minify:（可选）选择不进行压缩。另请参阅：Minification。
  • data-target-path:（可选）输出放置在 dist 目录内的路径。如果不存在，则该目录放置在 dist 根目录中。路径必须是相对路径，且不包含 ..。

icon

✅ rel="icon"：Trunk 将 href 属性中指定的 icon 图像复制到 dist 目录。此内容已进行哈希处理以进行缓存控制。

  • data-integrity:（可选）代码和脚本资源的 integrity 摘要类型。默认为 plain sha384。
  • data-no-minify:（可选）选择不进行压缩。另请参阅：Minification。
  • data-target-path:（可选）输出放置在 dist 目录内的路径。如果不存在，则该目录放置在 dist 根目录中。路径必须是相对路径，且不包含 ..。

inline

✅ rel="inline"：Trunk 将 href 属性中指定的文件内容内联到 index.html 中。此内容完全复制，不执行哈希处理。

  • type:（可选）– 如果不存在，则类型由文件扩展名推断。
    • html, svg
    • css：CSS 包装在 style 标签中
    • js：JavaScript 包装在 script 标签中
    • mjs, module：JavaScript 包装在带有 type="module" 的 script 标签中

copy-file

✅ rel="copy-file"：Trunk 将 href 属性中指定的文件复制到 dist 目录。此内容完全复制，不执行哈希处理。

  • data-target-path:（可选）输出放置在 dist 目录内的路径。如果不存在，则该目录放置在 dist 根目录中。路径必须是相对路径，且不包含 ..。

copy-dir

✅ rel="copy-dir"：Trunk 将递归地将 href 属性中指定的目录复制到 dist 目录。此内容完全复制，不执行哈希处理。

  • data-target-path:（可选）输出放置在 dist 目录内的路径。如果不存在，则该目录放置在 dist 根目录中。路径必须是相对路径，且不包含 ..。

脚本资产类型

脚本资产更加多样化。

脚本资产

由 Trunk 处理的经典脚本资产必须遵循以下三个规则

  • 必须声明为有效的 HTML script 标签。
  • 必须具有属性 data-trunk。
  • 必须具有属性 src，指向一个脚本文件

注意

一个*有效*的 HTML script 标签始终具有结束标签（例如 <script></script>）。自闭合脚本标签（例如 <script />）是无效的 HTML 脚本标签，将触发警告，并可能创建无法正常工作的 HTML 文件。

这通常看起来像这样：<script data-trunk src="{path}" ..其他选项..></script>。所有 <script data-trunk ...></script> HTML 元素都将被关联管道的输出 HTML 替换。

Trunk 将复制在源 HTML 中找到的脚本文件，而无需内容修改。此内容已进行哈希处理以进行缓存控制。src 属性必须包含在指向要处理的脚本文件的脚本中。

  • data-no-minify:（可选）选择不进行压缩。另请参阅：Minification。
  • data-target-path:（可选）输出放置在 dist 目录内的路径。如果不存在，则该目录放置在 dist 根目录中。路径必须是相对路径，且不包含 ..。

JS 代码片段

从 wasm-bindgen JS 代码片段功能 生成的 JS 代码片段会自动复制到 dist 目录，进行哈希处理并准备就绪。无需其他设置。只需在您的应用程序中使用该功能，Trunk 将负责其余的事情。

图像 & 其他资源

通过将如下链接添加到您的源 HTML，可以将图像和其他资源类型复制到 dist 目录中：<link data-trunk rel="copy-file" href="path/to/image"/>。支持任何普通文件类型。这将导致 Trunk 查找目标资源，并将其未修改地复制到 dist 目录。不会应用哈希处理。链接本身将从 HTML 中删除。要复制整个资产/图像目录，可以使用以下 HTML：<link data-trunk rel="copy-dir" href="path/to/images-dir"/>。

这将允许您的 WASM 应用程序直接从 dist 目录引用图像，并且 Trunk 将确保这些图像在 dist 目录中可用以供服务。

注意

随着 Trunk 继续成熟，我们将找到更好的方法来包含图像和其他资源。对内容进行哈希处理以进行缓存控制非常棒，我们只需要找到一种好的模式来处理 Rust 组件中引用的图像。请参与 trunk#9 中的讨论！在那里见。

指令

您可以通过将此添加到您的 <head> 中来指示 Trunk 将传递给 --public-url 的 URL 写入 HTML 输出：<base data-trunk-public-url/>。

Trunk 将元素的 href 属性设置为公共 URL。这更改了相对 URL 的行为，使其相对于公共 URL 而不是当前位置。

您还可以在运行时使用 document.baseURI 访问此值，这对于需要知道其托管的基本 URL 的应用程序（例如，用于路由）很有用。