如何在 React 中创建 Worker

Question

我正在尝试在使用 react 16.8.6 和 yarn 1.16.0 从 create-react-app 创建的应用程序中创建一个 worker。如果我使用 const backgroundWorker = new Worker('../assets/js/myWorker.js');

我收到控制台错误：Uncaught SyntaxError: Unexpected token <

但我知道那是正确的道路。这在 Angular 中工作正常。有没有关于如何在 React 中创建 worker 的好教程？

Answer 1

目录 "assets" 是 @angular/cli 项目的 public 目录，而不是 create-react-app 项目。在 create-react-app 中，@angular/cli "assets" 的等效项是 "public"，它在 Using the Public Folder 下的 create-react-app 文档中有所描述。将您的 "js" 目录和 "myWorker.js" 文件移动到 public 目录并更新工作程序的创建以指向该路径：

const backgroundWorker = new Worker('/js/myWorker.js');

您也可以使用 process.env.PUBLIC_URL 代替：

const backgroundWorker = new Worker(`${process.env.PUBLIC_URL}/js/myWorker.js`);

希望对您有所帮助！

Answer 2

按照这些步骤将您的工作文件添加到您的 create-react-app 项目。

1.安装这三个包：

$ yarn add worker-plugin --dev
$ yarn add comlink
$ yarn add react-app-rewired --dev

2。覆盖 webpack 配置：

在项目的 root 目录中创建一个包含以下内容的 config-overrides.js 文件：

const WorkerPlugin = require("worker-plugin");

module.exports = function override(config, env) {
    //do stuff with the webpack config...

    config.plugins = [new WorkerPlugin({ globalObject: "this"}), ...config.plugins]
    return config;
}

3。将 package.json 中的 npm 脚本替换为：

"start": "react-app-rewired start",
"build": "react-app-rewired build",

4.创建两个文件以测试您的配置：

worker.js

import * as Comlink from "comlink";

class WorkerWorld {
  sayHello() {
    console.log("Hello! I am doing a heavy task.")
    let numbers = Array(500000).fill(5).map(num => num * 5);
    return numbers;
  }
}

Comlink.expose(WorkerWorld)

use-worker.js

import * as Comlink from "comlink";

const initWorker = async () => {
    const workerFile = new Worker("./worker", { name: "my-worker", type: "module" });
    const WorkerClass = Comlink.wrap(workerFile)

    const instance = await new WorkerClass();
    const result = await instance.sayHello();
    console.log("Result of my worker's computation: ", result);
}
initWorker()

5.查看输出：

$ yarn start

如何在 React 中创建 Worker

How To Create Worker in React

worker

reactjs