如何在使用create-react-app創建的文件中導入Emscripten生成的.wasm / js文件

Question

我有一個庫，我可以使用Emscripten生成的.html文件成功構建和運行。 我現在想將它與React一起使用，但是，我得到一個MIME類型錯誤，我無法修復。 以下是我生成React應用程序和.wasm文件的步驟

npx create-react-app stackoverflow

DEST=stackoverflow/src/stackoverflow.html

sudo docker run --rm -v $(pwd):/src trzeci/emscripten emmake make

$ docker run --rm -v $(pwd):/src trzeci/emscripten emcc \
    ... o. files
    -s MODULARIZE=1 \
    -s ERROR_ON_UNDEFINED_SYMBOLS=0 \
    -s EXPORT_NAME=Stackoverflow \
    -o ${DEST}

# disable eslint for the generate file
sed -i '1s;^;/* eslint-disable */\n;' ${DEST}

我希望能夠導入Stackoverflow的內部對象stackoverflow.js

App.js
...

import Stackoverflow from './stackoverflow';
console.log(Stackoverflow());

...

但是，dev服務器無法加載，控制台會顯示這些警告。

m streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
(anonymous) @ stackoverflow.js:1667
Promise.then (async)
createWasm @ stackoverflow.js:1663
Module.asm @ stackoverflow.js:1694
(anonymous) @ stackoverflow.js:5322
./src/App.js @ App.js:5
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
./src/index.js @ index.css?f3f6:45
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ stackoverflow.js:5867
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
stackoverflow.js:1668 falling back to ArrayBuffer instantiation
(anonymous) @ stackoverflow.js:1668
Promise.then (async)
createWasm @ stackoverflow.js:1663
Module.asm @ stackoverflow.js:1694
(anonymous) @ stackoverflow.js:5322
./src/App.js @ App.js:5
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
./src/index.js @ index.css?f3f6:45
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ stackoverflow.js:5867
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
stackoverflow.js:1654 failed to asynchronously prepare wasm: CompileError: AsyncCompile: Wasm decoding failed: expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

報告的第一個錯誤說MIME類型錯誤， 這個問題告訴我更新node-mime和webpack-dev-server 。 node-mime在我的node_modules不存在，但是webpack-dev-server就是這個問題，這顯然已經解決了我的問題，可以在3.3.1上找到。

$ npm run eject

然后我將我的webpack-dev-server版本更改為3.3.1並安裝。

現在我運行npm run start並逐步執行代碼，我可以確認我到達了正確的dev-server。

但我的錯誤仍然存​​在。 我覺得我在這里遺漏了一些明顯的東西。

Answer 1

我必須做幾件事才能讓它工作，我的大部分故障排除都是徒勞的（開發服務器根本沒有提供.wasm文件，當它無法找到你時，它會回到.html上想要，這是我的MIME錯誤的來源）。

如何讓EMSCRIPTEN JAVASCRIPT使用create-react-app

1. 所述的.wasm輸出復制emcc到react-app/public文件夾cp stackoverflow.wasm gifsicle-react/public/stackoverflow.wasm
2. 將eslint-disable添加到文件頂部（我使用此sed命令） sed -i.old '1s;^;\\/* eslint-disable *\\/;' stackoverflow.js sed -i.old '1s;^;\\/* eslint-disable *\\/;' stackoverflow.js
3. 用絕對值替換.js中.wasm文件的相對路徑。 （這是獲取/public目錄中的文件所必需的） sed -i.old "s|stackoverflow.wasm|/stackoverflow.wasm|" stackoverflow.js sed -i.old "s|stackoverflow.wasm|/stackoverflow.wasm|" stackoverflow.js
4. 生成的javascript將嘗試解析相對於網站目錄的路徑。 注釋掉這行sed -i.old "s|wasmBinaryFile = locateFile|// wasmBinaryFile = locateFile|" stackoverflow.js sed -i.old "s|wasmBinaryFile = locateFile|// wasmBinaryFile = locateFile|" stackoverflow.js

我最后寫了這篇博文，其中詳細介紹了我如何管理這篇文章。