3

私は 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 に追加できるものはありますか? 正しいセットアップは何ですか?

4

0 に答える 0