如何在带有 React 的 Webworker 中使用本地 class？

Question

我正在做网络工作者，想使用本地 class。 worker 是在具有（大部分）标准 Webpack 设置的 React 应用程序中创建和使用的。这是基本代码：

/* eslint-disable no-restricted-globals */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable @typescript-eslint/explicit-member-accessibility */
/* eslint-disable no-eval */

class Executor {
    run(code) {
        let result = "";
        let isError = false;
        try {
            result = eval(code);
            if (typeof result === "object") {
                result = JSON.stringify(result);
            }
        } catch (error) {
            result = error.toString();
            isError = true;
        }

        return [result, isError];
    }
}

export default () => {
    try {
        const executor = new Executor();
    } catch (e) {
        console.log("Webworker startup error: " + e);
    }
};

当我创建 webworker 时：

public componentDidMount(): void {
    const code = runtime.toString();
    const blob = new Blob(["(" + code + ")()"]);
    this.worker = new Worker(URL.createObjectURL(blob));
    this.worker.onmessage = this.handleWorkerMessages;
}

我收到错误：

Webworker startup error: ReferenceError: Executor is not defined

还需要什么才能让 webworker 认识到 class？

我还尝试将 class 放入外部文件并从那里导入它，但这只是稍微改变了错误：

Webworker startup error: ReferenceError: _ScriptingExecutor__WEBPACK_IMPORTED_MODULE_0__ is not defined

Answer 1

要了解发生了什么，您必须查看从导入模块生成的字符串（就在它被转换为 Blob 之前）。它仅包含默认导出代码（即匿名函数）。 class 不包括在内，因此，当您将代码加载到您的 worker 中时，它会错过 class.

因此，要么不为工作人员代码使用模块，要么使用 URL 脚本并将其提供给工作人员。

Answer 2

我认为如果将 Executor 放在 default 部分中它会起作用。

export default () => {
    class Executor {
        run(code) {
            let result = "";
            let isError = false;
            try {
                result = eval(code);
                if (typeof result === "object") {
                    result = JSON.stringify(result);
                }
            } catch (error) {
                result = error.toString();
                isError = true;
            }

            return [result, isError];
        }
    }

    try {
        const executor = new Executor();
    } catch (e) {
        console.log("Webworker startup error: " + e);
    }
};

如何在带有 React 的 Webworker 中使用本地 class？

How to use a local class in a Webworker with React?

javascript

web-worker

reactjs