如何將庫導入 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()