前面在《解決 Rust WebAssembly 啟動(dòng) Web 程序報(bào)錯(cuò)》 一文中講到拇勃，將 Webpack 升級(jí)到 5.54.0+。其實(shí)問題并未徹底解決膏秫，還潛藏另一個(gè)問題。當(dāng)我們像原先那樣，通過導(dǎo)出 memory 來(lái)訪問 WebAssembly 線性內(nèi)存：
import { memory } from "wasm-game-of-life/wasm_game_of_life_bg";
在 npm run start 時(shí)會(huì)報(bào)警梧宫，結(jié)果是程序無(wú)法正常運(yùn)行：
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 中搜了一通壹蔓。發(fā)現(xiàn)都有報(bào)告類似問題，不知為何過了兩三年仍處于 Open 狀態(tài)猫态。不過評(píng)論中也有提出可供參考的解決辦法佣蓉。
總結(jié)了評(píng)論中的方法，我自己做了這樣的修改：
首先亲雪，在 www 目錄中創(chuàng)建一個(gè)源文件 memory.js勇凭，用以從 wasm 文件中導(dǎo)出 memory，內(nèi)容如下：
// 從 `wasm` 文件中導(dǎo)出 `memory`
export { memory } from "wasm-game-of-life/wasm_game_of_life_bg.wasm";
然后义辕，在我們需要訪問 memory 的源文件中導(dǎo)入：
// 導(dǎo)入 `memory`
import { memory } from './memory';
...
// 訪問線性內(nèi)存中的宇宙細(xì)胞數(shù)據(jù)
const cellsPtr = universe.cells();
const size = Math.ceil((width * height) / 8);
const cells = new Uint8Array(memory.buffer, cellsPtr, size);
再次 npm run start虾标，正常運(yùn)行！
image.png
對(duì)了灌砖，別忘記我們之前升級(jí) Webpack 5 時(shí)璧函，修改了 webpack.config.js：
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
},
};
