reactjs - React.js + OpenCV.js ReferenceError:未定义cv

Question

基本上我不能同时运行opencv.js和react.js，因为(我认为)opencv.js太大(7.8mb)，无法进行纱线编译(我得到最大的调用栈错误)。鉴于此，我也无法在index.html中加载opencv.js，因为它的加载速度太慢，以至于React无法将其获取，给了我cv is not defined。

创建一个onLoad =“myfunc()”函数使我最着急，因为我可以将var loaded设置为true并在ReactDOMrender周围包装if语句。但是当var更改为true且从不渲染时，它永远不会拾取。

我尝试了以下方法:

1)将opencv.js脚本直接导入到我的index.js中，我正在对此进行测试。我收到最大调用堆栈错误。我猜这是因为opencv.js约为8mb，编译器不喜欢它吗？

2)我试图在opencv.js文件中添加public/index.html。我使用async加载它，并将/*global cv*/添加到index.js文件的顶部。我得到错误cv未定义。

import React from 'react';

/*global cv*/
var mytest = function() {
    var test = cv.Mat();
    console.log(test + ' if you see something before this, opencv loaded');
}
mytest();


function App() {
  return (
    <div>hello world</div>
)}

export default App;

并在index.html的中:
<script async src="opencv.js" type="text/javascript"></script>
这将失败，并表示未定义cv。我也使用onLoad="whenOpenCvLoads()"尝试过使用此函数将var设置为true，并包装(我相信是)第一个被调用的函数，如下所示:

if(openCvIsReady === true){
    ReactDOM.render(<App />, document.getElementById('root')); 
    console.log(openCvIsReady + ' in react');
}

该评估结果为false，并且在变量最终变为true时永远不会运行。

任何想法都将受到欢迎!

Answer 1

我正在使用包裹 bundle 器在React上使用OpenCV 3.4，您只能使用导入尝试它。请看下面的屏幕截图。

Result

Code