[英]How to use Emscripten compiled JavaScript within React / React Native
[英]How to Use Emscripten JavaScript File in React
我正在尝试将 JavaScript 文件导入 React,该文件是使用 Emscripten 从 C 代码编译的。 这与这里的问题类似,但答案似乎不起作用。 目标是能够在 JS 文件中导入 function 并像命名为 function 一样调用它。 我使用以下命令编译了 MODULARIZE 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;
}
导入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
您需要使用某种异步模式来等待 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();
})()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.