将函数传递给使用 webpack 导入类的 web worker答案

【问题标题】：Pass a function to a web worker that uses a webpack imported class将函数传递给使用 webpack 导入类的 web worker
【发布时间】：2019-09-16 21:48:41
【问题描述】：

我想将一个简单的函数传递给 web worker，而不是直接在 web worker 中编写。我知道这不是直接可能的，但是在许多情况下，您可以通过在您的函数上调用 toString() 并在该字符串上调用 eval 来“解决”这个问题，一旦它在工作线程中。

我在其他地方没有看到的警告是这个函数使用了一个从另一个模块导入的类。（我正在使用 webpack。）

接这个函数：() => new MyClass();

在它上面调用toString()会得到这个：

() => {
  return new _MyClass__WEBPACK_IMPORTED_MODULE_5__["MyClass"]();
}

这是有道理的，因为MyClass 是从另一个模块导入的。问题是在工作人员中对此调用eval 会产生错误：

ReferenceError: _MyClass__WEBPACK_IMPORTED_MODULE_5__ 未定义

同样，这是有道理的，因为该类没有导入到 worker 的模块中。但是有什么办法可以解决这个问题吗？该函数引用的类在编写 worker 时是未知的。

不出所料，无论是使用 worker-loader 还是使用像这样的对象 URL 创建 worker，我都会得到这个结果：

new Worker(URL.createObjectURL(new Blob([functionString])));

我尝试在传递给工作人员的函数中使用动态导入，但这仍然失败，因为工作人员似乎不希望进行动态导入：

() => {
  return import ('./MyClass')
    .then(module => new module.MyClass());
}

ReferenceError: __webpack_require__ 未定义

有什么聪明的方法可以解决这个问题，还是我应该放弃并期望为我想要实例化的每个类编写一个不同的工作者？

【问题讨论】：

我尝试序列化类本身以传递给工作人员，这有点工作，除了这个类扩展了另一个类，但“扩展”写出一个导入的模块名称，而类名本身是按照原件。 class MyBaseClass { constructor() { this.something = []; } ... } 与 class MyInstanceClass extends my_package__WEBPACK_IMPORTED_MODULE_0__["MyBaseClass"] { constructor() { super(); this.somethingElse = []; } ... } 没有直接关系
如果我尝试通过包含动态导入语句“强制”webpack_require 在我的工作人员中定义，我会得到__webpack_require__.e is not a function
我尝试使用 worker-plugin 而不是 worker-loader，但目前在使用动态导入时遇到错误：github.com/GoogleChromeLabs/worker-plugin/issues/43
createObjectURL 和动态导入的组合对我也不起作用，因为 __webpack_require__ 没有定义。我不能“强制”它，因为 webpack 不是在工作人员内容上单独运行的。
我绕过了使用带有动态导入的 worker-plugin 的第一个问题，但是 worker 中的 import() 期望文件被命名为 2.chunk.worker.js，而实际的包只是被命名2.chunk.js。如果此问题得到解决，这有望解决：github.com/GoogleChromeLabs/worker-plugin/issues/19

标签： javascript webpack import module web-worker

【解决方案1】：

我得出的结论是，这不能以一种健壮且非 hacky 的方式完成，尽管我很高兴被证明是错误的。

我将为每个要实例化的类使用不同的工作器，至少现在是这样。

【讨论】：