在React中创建一个Web worker

Question

我有一个使用create-react-app创建的React应用程序,而不是已弹出.我正在尝试使用网络工作者.我已经尝试了worker-loader包(https://github.com/webpack-contrib/worker-loader).

如果我尝试使用开箱即用的worker-loader(import Worker from 'worker-loader!../workers/myworker.js';),我会收到错误消息,告诉我创建React App不支持Webpack加载器,我已经知道了.

解决方案是弹出应用程序(我不想这样做)并编辑webpack.config.js还是有其他方法在React应用程序中使用Web worker？

编辑:我在这里找到了解决方案:https://github.com/facebookincubator/create-react-app/issues/1277(由yonatanmn发布)

Answer 1

正如我在上面的问题的编辑中所写,我在这里找到了解决方案:https://github.com/facebookincubator/create-react-app/issues/1277

这是一个有效的例子:

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

    self.onmessage = function(e) {
        console.log('Message received from main script');
        var 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;

然后,在需要使用Web worker的文件中:

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

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