Как я могу импортировать сгенерированные Emscripten файлы .wasm / js в файлы, созданные с помощью create-реагировать-приложение - PullRequest
Новая
       19

Как я могу импортировать сгенерированные Emscripten файлы .wasm / js в файлы, созданные с помощью create-реагировать-приложение

0 голосов
/ 26 апреля 2019

У меня есть библиотека, которую я могу успешно собрать и запустить с помощью 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, и этот вопрос подсказывает мне обновить 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-сервер.

И все же моя ошибка сохраняется.Я чувствую, что упускаю что-то очевидное здесь.

1 Ответ

0 голосов
/ 28 апреля 2019

Я должен был сделать пару вещей, чтобы заставить это работать найти то, что вы хотите, это было источником моих ошибок MIME).

КАК НАСТРОИТЬ СООБЩЕНИЕ JAVASCRIPT С СОЗДАНИЕМ-РЕАКЦИИ-100 * *

  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
  3. Заменить относительный путь файла .wasm в .js на абсолютный. (Это необходимо для получения файлов в каталоге /public) sed -i.old "s|stackoverflow.wasm|/stackoverflow.wasm|" stackoverflow.js
  4. Сгенерированный javascript попытается определить путь относительно каталога сайта. Закомментируйте эту строку sed -i.old "s|wasmBinaryFile = locateFile|// wasmBinaryFile = locateFile|" stackoverflow.js

Я закончил тем, что написал это сообщение в блоге, в котором есть больше деталей о том, как мне это удалось.

...