Web Workers 中的 importScripts 在 React/Webpack 环境中未定义

Posted 2023-02-21

【中文标题】Web Workers 中的 importScripts 在 React/Webpack 环境中未定义

【英文标题】：importScripts in Web Workers is undefined inside a React/Webpack environment

【发布时间】：2018-05-12 23:24:40

【问题描述】：

我正在开发一个使用 create-react-app 创建的 React 应用程序。我在其中创建网络工作者时遇到问题，所以我在这里发布了一个问题：Creating a web worker inside React

我找到了一个解决方案，如上面的帖子中所写，可以在不弹出应用程序和弄乱 Webpack 配置的情况下加载工作程序。这是代码，来自上面的帖子：

// worker.js
const workercode = () => 

    self.onmessage = function(e) 
        console.log('Message received from main script');
        const workerResult = 'Received from main: ' + (e.data);
        console.log('Posting message back to main script');
        self.postMessage(workerResult);
    
;

let code = workercode.toString();
code = code.substring(code.indexOf("")+1, code.lastIndexOf(""));

const blob = new Blob([code], type: "application/javascript");
const worker_script = URL.createObjectURL(blob);

module.exports = worker_script;

在使用worker的文件中：

import worker_script from './worker';
const myWorker = new Worker(worker_script);

myWorker.onmessage = (m) => 
    console.log("msg from worker: ", m.data);
;
myWorker.postMessage('im from main');

它可以工作，但是，我似乎无法让 importScripts 工作。即使我这样做（在 onmessage 之外或在 onmessage 内部）：

if (typeof importScripts === 'function') 
    importScripts('myscript.js');

在这种情况下，if 语句结果为 true，但在实际导入时失败，并显示相同的错误消息 'importScripts' is not defined，就好像 if 语句是误报一样，这听起来不正确。我会说这是一个上下文问题，并且工作人员可能没有正确加载（尽管它似乎工作），但这只是一个猜测。

有什么想法吗？

【问题讨论】：

有没有想过这个问题？我也想做同样的事情。

@esilac 我最终弹出了我的 create react 应用程序项目并使用 worker-loader 包来加载我的工人。不过，从那以后我就没有尝试过使用 importScripts 了。我所有的工作代码都在主脚本中加载的文件中。

【参考方案1】：

importScripts 在从 Blob 创建的 worker 中运行良好，至少在 2021 年（react 17.0.2、react-scripts 4.0.3、Chrome 92）。导入的脚本 URL 必须是绝对的，因为 worker 是从 Blob 创建的。

最初的问题可能是 webpack 中的一个错误，或者转译可能以一种奇怪的方式改变了代码。

const workercode = () => 
    importScripts("https://example.com/extra.js");
    console.log(self.extraValue); // 10

    self.onmessage = function(e) 
        console.log('Message received from main script');
        ...
    
;

 

// extra.js
self.extraValue = 10;

【参考方案2】：

看起来这在 2022 年仍然被打破 - 似乎在开发管道中出现了回归（至少在 android WebView 和可能的一些开发/金丝雀 chrome 版本中。）

https://bugs.chromium.org/p/chromium/issues/detail?id=1078821