如何在 React 中使用 Emscripten JavaScript 文件

Posted 2023-02-22

【中文标题】如何在 React 中使用 Emscripten JavaScript 文件

【英文标题】：How to Use Emscripten JavaScript File in React

【发布时间】：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

【参考方案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();
)()