如何将库导入 React.js 中的 web 工作人员？

Question

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

worker.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")这使得错误 go 消失但没有任何作用：工作人员没有做它是什么打算做的。

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

Answer 1

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