如何在React中使用Emscripten JavaScript文件

Question

我正在尝试将JavaScript文件导入到使用Emscripten从C代码编译的React文件中。这类似于此问题here，但答案似乎无效。目的是能够将函数导入JS文件中，并像命名函数一样调用它。我使用以下命令用MODULARIZE=1和WASM=0编译了JS文件：

emcc ../../helloWorld/ping.c -o ../../helloWorld/ping.js -s WASM=0 -s ENVIRONMENT=web -s EXTRA_EXPORTED_RUNTIME_METHODS="['cwrap']" -s MODULARIZE=1

ping.c

#include <stdio.h>
#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int pingIt() {
  return 1;
}

importPingIt.js

let Module = require('./ping.js'); // Your Emscripten JS output file
let pingIt = Module().cwrap('pingIt'); // Call Module as a function

Module.exports = pingIt;

App.js

import React from 'react';
import './App.css';
import pingIt from './importPingIt.js';

export default class App extends React.Component {

  handleClick = () => {
    console.log("button clicked OK");
    pingIt();
  }

  render() {

    return (

      <div>
        <button onClick={this.handleClick}> Button 1 </button>
      </div>

    );
  }

}

编译时，出现以下错误：

index.js:1375 ./src/ping.js
  Line 87:    Unexpected use of 'self'                                               no-restricted-globals
  Line 695:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 744:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 836:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1009:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1233:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1487:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2133:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2271:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2284:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2302:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2585:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2743:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 4006:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 4640:  'define' is not defined                                                no-undef
  Line 4641:   Expected imports instead of AMD define()                               import/no-amd
  Line 4641:   'define' is not defined                                                no-undef

Answer 1

您需要使用某种异步模式来等待Wasm模块加载。尝试使用pingIt.ready Promise的类似方法：

import pingItWasm from './importPingIt.js';

let pingIt = {
  ready: new Promise(resolve => {
    pingItWasm({
      onRuntimeInitialized() {
        pingIt = this.pingIt;
        pingIt.ready = Promise.resolve()
        resolve();
      }
    });
  })
};

(async () {
  await pingIt.ready;
  pingIt();
})()