如何将Rust(Wasm生命游戏风格应用)转为单嵌入HTML页面？

问题根源 #

rustwasm默认生成的绑定代码（如j_game_of_life_bg.js）与Wasm模块存在硬编码的依赖关系，直接嵌入Base64会导致加载路径不匹配，触发报错。以下是两种可行的解决方案：

方案一：直接修改wasm-pack构建配置+嵌入式Wasm #

1. 调整构建目标
   使用--target web替代默认的bundler目标，生成无需打包器即可运行的代码：

   wasm-pack build --target web --out-name game_of_life --out-dir ./temp
   

2. 合并代码到HTML
   • 将生成的game_of_life.js内容复制到HTML的<script>标签中
   • 将game_of_life_bg.wasm转换为Base64编码（命令行工具：base64 -i game_of_life_bg.wasm > wasm_base64.txt）
   • 修改JS中的Wasm加载逻辑，替换原fetch调用为Base64解码：

     // 替换原fetch代码
     const wasmBase64 = "这里填入你的Wasm Base64字符串";
     const wasmBytes = Uint8Array.from(atob(wasmBase64), c => c.charCodeAt(0));
     const fakeResponse = new Response(wasmBytes, { headers: { 'Content-Type': 'application/wasm' } });
     const module = await WebAssembly.instantiateStreaming(fakeResponse, imports);
     

3. 验证运行
   保存HTML后，可直接在浏览器打开（火狐需临时关闭privacy.file_unique_origin限制）

方案二：用打包器合并所有依赖为单文件 #

1. 配置Rollup打包
   安装依赖：

   npm install rollup rollup-plugin-terser
   

   创建rollup.config.js：

   import { terser } from 'rollup-plugin-terser';
   
   export default {
     input: './temp/game_of_life.js',
     output: {
       file: './bundle.js',
       format: 'iife',
       name: 'GameOfLife'
     },
     plugins: [terser()]
   };
   

   执行打包：

   rollup -c
   

2. 嵌入打包后的代码
   将bundle.js内容复制到HTML的<script>中，再按方案一的方法把Wasm转Base64并修改加载逻辑，最终得到完全独立的单HTML文件

关键注意事项 #

• 改用--target web目标后，Wasm模块不再硬编码外部JS路径，所有依赖逻辑会被整合到生成的JS绑定中
• 火狐本地打开HTML时，需在about:config中设置privacy.file_unique_origin为false，避免跨域限制

内容的提问来源于stack exchange，提问作者gmatht