Trunk项目中环境变量在构建钩子中的使用技巧

在Trunk项目构建过程中，开发者经常需要自定义构建流程。其中构建钩子(hook)是一个非常实用的功能，允许我们在构建的不同阶段执行自定义命令。本文将深入探讨如何在post_build阶段正确使用环境变量，特别是$TRUNK_STAGING_DIR的使用方法。

环境变量的基本用法

Trunk提供了多个内置环境变量，其中$TRUNK_STAGING_DIR指向构建输出的临时目录。这个变量在构建钩子中特别有用，因为它允许我们访问构建生成的中间文件。

一个常见的用例是在构建完成后对生成的HTML文件进行格式化处理。例如使用prettier工具美化index.html文件。初学者可能会尝试直接在Trunk.toml中这样配置：

[[hooks]]
stage = "build"
command = "prettier"
command_arguments = ["--write", "$TRUNK_STAGING_DIR/index.html"]

然而这种写法会导致命令执行失败，因为环境变量没有被正确展开。

正确的环境变量展开方式

要让环境变量被正确展开，需要通过shell来执行命令。正确的配置方式应该是：

[[hooks]]
stage = "post_build"
command = "sh"
command_arguments = ["-c", "prettier --write $TRUNK_STAGING_DIR/index.html"]

这种写法通过调用shell(sh)来执行命令，确保环境变量能够被正确解析和展开。其中-c参数告诉shell执行后面的命令字符串。

格式化HTML的注意事项

虽然格式化构建输出文件是个好习惯，但在Trunk项目中格式化HTML文件时需要特别注意：

1. 开发模式(trunk serve)下，Trunk会自动注入WebSocket相关代码用于热重载
2. 常见的HTML格式化工具(prettier、tidy等)可能会修改这些注入的代码
3. 这会导致浏览器开发者工具中出现大量WebSocket连接错误

建议的解决方案：

• 仅在发布构建(trunk build --release)时执行格式化
• 或者配置格式化工具保留特定的代码块不被修改

最佳实践建议

1. 对于需要环境变量的命令，总是通过shell来执行
2. 格式化构建产物时，考虑开发模式和发布模式的不同需求
3. 复杂的构建后处理可以考虑编写专门的脚本文件，然后在hook中调用
4. 测试hook时，可以先使用简单的命令(如echo)验证环境变量是否正确展开

通过合理使用构建钩子和环境变量，可以大大增强Trunk构建流程的灵活性和可定制性，满足各种复杂的项目需求。