reactjs – 在React中创建一个Web worker

发布时间：2020-12-15 20:16:03 所属栏目：百科来源：网络整理

导读：我有一个使用create-react-app创建的React应用程序,而不是已弹出.我正在尝试使用网络工作者.我尝试过worker-loader软件包( https://github.com/webpack-contrib/worker-loader). 如果我尝试开箱即用的worker-loader(从’worker-loader！../ workers / mywork

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

如果我尝试开箱即用的worker-loader(从’worker-loader！../ workers / myworker.js’中导入Worker),我收到错误消息,告诉我Create React App不支持Webpack加载器,我已经知道了.

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

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

解决方法

正如我在上面问题的编辑中所写,我在这里找到了解决方案： 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');

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!