Rust WASM：将 CLI 移植到浏览器

将Rust命令行工具迁移至WebAssembly并部署到GitLab Pages

一个用于生成文本预测的控制台应用程序已通过Rust移植到WebAssembly。计算逻辑被隔离在WASM模块中，而界面则实现为具有类终端用户体验的静态HTML页面。通过GitLab Pages部署，无需任何安装即可即时访问演示。

该项目包含用于核心逻辑的Rust库、使用原生JavaScript和CSS构建的前端，以及wasm-pack构建产物。这种方法非常适合不需要文件系统访问或平台特定API的轻量级实用工具。

项目架构

结构分为三个组件：

• src/lib.rs — Rust核心逻辑及导出函数。
• public/index.html、styles.css、app.js — 终端风格界面。
• public/pkg/ — 编译的WASM文件和JavaScript包装器。

由于没有操作系统依赖，移植过程变得直接：应用程序接收命令并返回文本。

将Rust导出到WASM

使用#[wasm_bindgen]导出主函数：

#[wasm_bindgen]
pub fn generate_reading_text() -> String {
    // 生成并格式化结果
}

使用以下命令构建：

wasm-pack build --target no-modules --release --out-dir public/pkg

结果：生成iching_wasm.js和iching_wasm_bg.wasm。--target no-modules选项简化了无需打包工具的集成过程。

在浏览器中集成WASM

在app.js中，使用base64编码的WASM同步加载模块以支持file://协议：

const wasmBytes = base64ToBytes(window.ICHING_WASM_BASE64);
wasm_bindgen.initSync({ module: wasmBytes });

const text = wasm_bindgen.generate_reading_text();
output.textContent = text;

在index.html中，包含以下文件：

• ./pkg/iching_wasm.js — 运行时。
• ./pkg/iching_wasm_bg_base64.js — Base64编码的WASM。
• app.js — 用户界面逻辑。

JavaScript调用WASM，结果渲染到DOM中。

终端风格用户界面

无框架界面：

• 带边框和窗口标题的容器。
• 等宽字体（例如JetBrains Mono）。
• 深色主题配绿色文本。
• 使用<pre>标签输出内容。
• 输入命令如./generate_reading。

视觉和行为上模拟控制台。按钮触发WASM调用。

构建和部署的CI/CD流程

.gitlab-ci.yml自动化流程：

image: rust:slim

create-pages:
  pages:
    publish: public
  rules:
    - if: '$CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH'
  before_script:
    - rustup target add wasm32-unknown-unknown
    - cargo install wasm-pack --locked
  script:
    - wasm-pack build --target no-modules --release --out-dir public/pkg
    - b64="$(base64 public/pkg/iching_wasm_bg.wasm | tr -d '\n')"
    - printf 'window.ICHING_WASM_BASE64 = "%s";\n' "$b64" > public/pkg/iching_wasm_bg_base64.js

步骤：安装目标平台、使用wasm-pack构建、将WASM编码为base64、将public/发布到Pages。

此方法的优势

• 可访问性：演示在任何浏览器中均可运行，无需Rust或本地安装。
• 安全性：WASM隔离消除了原生代码的风险。
• 简单性：静态托管，一个CI任务。
• 可移植性：适用于无系统调用的命令行工具。

关键要点

• 无文件系统或API依赖的逻辑完美适配WASM—构建仅需数秒。
• WASM的Base64编码解决了CORS和file://协议问题。
• GitLab Pages + wasm-pack CI为原型提供了现成的流水线。
• 原生JavaScript/HTML界面最小化开销。
• #[wasm_bindgen]是将Rust导出到JavaScript的标准方法。

— Editorial Team