Webpack 5 支持访问 Rust WebAssembly 线性内存

Atypiape22024-08-26 21:16

前面在《解决 Rust WebAssembly 启动 Web 程序报错》一文中讲到，将 Webpack 升级到 5.54.0+。其实问题并未彻底解决，还潜藏另一个问题。当我们像原先那样，通过导出 memory 来访问 WebAssembly 线性内存：

javascript 复制代码

import { memory } from "wasm-game-of-life/wasm_game_of_life_bg";

在 npm run start 时会报警，结果是程序无法正常运行：

bash 复制代码

export 'memory' (imported as 'memory') was not found in 'wasm-game-of-life/wasm_game_of_life_bg'
 (possible exports: Universe, __wbg_error_f851667af71bcfc6, 
__wbg_new_abda76e883ba8a5f, __wbg_set_wasm, __wbg_stack_658279fe44541cf6, 
__wbindgen_object_drop_ref, __wbindgen_throw)

在 github 上 wasm-bindgen、wasm-pack 和 webpack 的 Issues 中搜了一通。发现都有报告类似问题，不知为何过了两三年仍处于 Open 状态。不过评论中也有提出可供参考的解决办法。

总结了评论中的方法，我自己做了这样的修改：

首先，在 www 目录中创建一个源文件 memory.js，用以从 wasm 文件中导出 memory，内容如下：

javascript 复制代码

// 从 `wasm`  文件中导出 `memory`
export { memory } from "wasm-game-of-life/wasm_game_of_life_bg.wasm";

然后，在我们需要访问 memory 的源文件中导入：

javascript 复制代码

// 导入 `memory`
import { memory } from './memory';

...

// 访问线性内存中的宇宙细胞数据
const cellsPtr = universe.cells();
const size = Math.ceil((width * height) / 8);
const cells = new Uint8Array(memory.buffer, cellsPtr, size);

再次 npm run start，正常运行！

对了，别忘记我们之前升级 Webpack 5 时，修改了 webpack.config.js：

javascript 复制代码

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require('path');

module.exports = {
  entry: "./bootstrap.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bootstrap.js",
  },
  mode: "development",
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: "index.html" },
      ]
    })
  ],
  // 支持 WebAssembly 打包
  experiments: {
    asyncWebAssembly: true,
    syncWebAssembly: true
  },
};