如何将库导入 React.js 中的网络工作者？

Posted 2023-03-07

【中文标题】如何将库导入 React.js 中的网络工作者？

【英文标题】：How to import a library into a web worker in React.js?

【发布时间】：2021-04-13 23:40:07

【问题描述】：

我正在尝试使用网络工作者在我的 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')   
    ;

TestComponent.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") 这使错误消失了，但没有任何效果：工人没有做它打算做的事情。

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

【问题讨论】：

您是否尝试过使用Worker-loader 作为您的 web-worker 的 webpack 插件？

你解决了吗？我遇到了同样的问题

你尝试使用useWorker库吗？

【参考方案1】：

我猜你应该在你的 service worker 文件中使用importScript()

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。