如何在 React 中创建 Worker

Question

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

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

但我知道那是正确的道路。 这在 Angular 中运行良好。 是否有关于如何在 React 中创建工作线程的好教程？

Answer 1

目录“assets”是@ angular / cli项目的公共目录，而不是create-react-app项目。 在create-react-app中，@ angular / cli“assets”的等价物是“public”，在使用公用文件夹下的create-react-app文档中对此进行了描述。 将“js”目录和“myWorker.js”文件移动到公共目录，并更新worker的创建以指向该路径：

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