如何在用create-react-app

时间:2019-04-26 13:40:28

标签: reactjs webpack emscripten webassembly

我有一个图书馆,可以使用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());

...

但是,开发服务器无法加载,控制台会显示这些警告。

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类型错误,并且this问题告诉我更新node-mimewebpack-dev-server。我的node-mime中没有node_modules,但是thiswebpack-dev-server,显然已经解决了我的问题,该问题在3.3.1中可用。

$ npm run eject

然后我将webpack-dev-server的版本更改为3.3.1并安装。

现在,我运行npm run start并逐步执行代码,可以确认我已到达正确的dev-server。

但是我的错误仍然存​​在。我觉得这里缺少明显的东西。

1 个答案:

答案 0 :(得分:0)

我必须做一些事情才能使它工作,这里的大部分故障排除都是徒劳的(开发服务器根本不提供.wasm文件,如果无法提供,它会退回到.html上)找到您想要的内容,这就是我的MIME错误的来源)。

如何使用create-react-app来制作嵌入式Java脚本

  1. emcc的.wasm输出复制到react-app/public文件夹cp stackoverflow.wasm gifsicle-react/public/stackoverflow.wasm
  2. 在文件顶部添加eslint-disable(我使用此sed命令)sed -i.old '1s;^;\/* eslint-disable *\/;' stackoverflow.js
  3. 用绝对值替换.js中.wasm文件的相对路径。 (这对于在/public目录中获取文件是必要的)sed -i.old "s|stackoverflow.wasm|/stackoverflow.wasm|" stackoverflow.js
  4. 生成的javascript将尝试解析相对于网站目录的路径。注释掉这一行 sed -i.old "s|wasmBinaryFile = locateFile|// wasmBinaryFile = locateFile|" stackoverflow.js

我最终写了this博文,其中详细介绍了我的管理方式。