如何在 React 中使用 Emscripten JavaScript 文件

Question

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

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;
}

导入PingIt.js

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

Module.exports = pingIt;

应用程序.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.readyPromise：

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();
})()