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

【问题标题】：How to import a library into a web worker in React.js?如何将库导入 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库吗？

标签： javascript reactjs import node-modules web-worker

【解决方案1】：

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

【讨论】：

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