如何将库导入到 React.js 中的 Web Worker 中？

Question

我正在尝试使用网络工作者在 React 应用程序的后台运行人脸检测过程。我正在使用一个名为的库face-api.js来进行人脸检测。但我不确定如何导入这个库以在我的worker.js文件中使用。

工人.js

    import * as faceapi from 'face-api.js';
    
    this.onmessage = (e) => {
      console.log("Message from worker.js");
      this.postMessage('Hello Main')   
    };

测试组件.js

import React, {useEffect} from 'react'

function TestComponent() {

    useEffect(() => {
        const worker = new Worker('./workers/worker.js')
        worker.postMessage('Hello Worker')
        worker.onmessage = e => {
        console.log('Message received from worker:', e.data)
    }
    }
    );

    return (
        <div>
            <h1> Test Component </h1>
        </div>
    )
    }


export default TestComponent

我运行此测试代码，在 chrome 上收到以下错误：

 /workers/worker.js:1 Uncaught SyntaxError: Cannot use import statement outside a module

我尝试过使用require导入库但不起作用。我还尝试将工作程序声明为模块， const worker = new Worker('./workers/worker.js', type: "module") 这使得错误消失，但没有任何效果：工作程序没有执行其预期的操作。

请指出我正确的方向。提前致谢！

Answer 1

importScript()我想你应该在你的服务工作者文件中使用