私は wasm-bindgen と反応アプリ (create-react-app で作成) を使用しており、wasm モジュールを Web ワーカーにインポートしたいと考えています。
最初に、この例を使用しています。
「メインスレッド」で wasm を使用するために、react-app-rewired をセットアップしました。config-overrides.js は次のとおりです。
const path = require('path');
module.exports = function override(config, env) {
const wasmExtensionRegExp = /\.wasm$/;
config.resolve.extensions.push('.wasm');
config.module.rules.forEach(rule => {
(rule.oneOf || []).forEach(oneOf => {
if (oneOf.loader && oneOf.loader.indexOf('file-loader') >= 0) {
// Make file-loader ignore WASM files
oneOf.exclude.push(wasmExtensionRegExp);
}
});
});
// Add a dedicated loader for WASM
config.module.rules.push({
test: wasmExtensionRegExp,
include: path.resolve(__dirname, 'src'),
use: [{ loader: require.resolve('wasm-loader'), options: {} }]
});
return config;
};
メイン スレッドでは、wasm をインポートして、ローカル npm リンクの後に次のように使用できます (npm モジュールは公開しませんでした)。
const wasm = import('my_wasm_package')
wasm.then(w => w.call__some_function())
メインスレッドでwasmモジュールをコンパイルしてからスレッドにpostMessageすることになっていると読んだので、次のことを試しました:
fetch("my_wasm_package").then(response =>
response.arrayBuffer()
).then(bytes =>
WebAssembly.compile(bytes)
).then(WasmModule =>
myWorker.postMessage(WasmModule)
);
これにより、次のエラーが表示されます。
localhost/:1 Uncaught (in promise) CompileError: WebAssembly.compile(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
通常のインポートコマンドでも試しました:
const wasm = import('my_wasm_package')
wasm.then(w => {
myWorker.postMessage(w)
})
そして、次のエラーが表示されます。
Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Worker': function greet() {
_satellite_rust_bg_wasm__WEBPACK_IMPORTED_MODULE_0__["greet"]();
} could not be cloned.
at
動作させるために webpack.config に追加できるものはありますか? 正しいセットアップは何ですか?