如何在 React 中使用 Emscripten JavaScript 文件答案

【问题标题】：How to Use Emscripten JavaScript File in React如何在 React 中使用 Emscripten JavaScript 文件
【发布时间】：2019-11-21 21:05:11
【问题描述】：

我正在尝试将一个 JavaScript 文件导入 React，该文件是使用 Emscripten 从 C 代码编译的。这类似于这个问题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

【问题讨论】：

标签： javascript reactjs emscripten

【解决方案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();
})()

【讨论】：