在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';)，我得到一个错误消息，告诉我Create React App不支持Webpack加载器，这一点我已经知道了。

解决方案是弹出应用程序(我不希望这样做)并编辑webpack.config.js，还是有其他方法可以在React应用程序中使用web workers？

编辑:我在这里找到了解决方案：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');

Answer 2

可以，可以通过custom-react-scripts使用自定义的webpack配置。

要在现有的create-react-app项目中使用custom-react-scripts，如本issue所述，您需要做的是：

• Remove react-scripts from package.json:"devDependencies"：{ "react-scripts"："0.6.1“}，
• Run npm install --save-dev *your-custom-react-scripts*

有关更详细的解释，请查看@kitze's article和他自己的custom-react-scripts，其中包括对以下功能的内置支持：

• 装饰器
• babel-preset-stage-0
• Less
• Sass
• CSS模块
• Sass模块
• Less modules
• Stylus模块

Answer 3

恭维dnmh的回答，如果你遇到“这个”，“自我”，“窗口”主题的问题，this comment in the github issue工作得很完美……

在我的例子中，下面的代码解决了我所有的麻烦：

你不需要接触这个文件，只需要保留它。

//WebWorkerEnabler.js
export default class WebWorkerEnabler {
    constructor(worker) {
         let code = worker.toString();
         code = code.substring(code.indexOf("{") + 1, code.lastIndexOf("}"));

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

这是您运行后台任务的位置

// WebWorker.js
export default function WebWorker(args) {
    let onmessage = e => { // eslint-disable-line no-unused-vars
         // THIS IS THE PLACE YOU EMBED YOUR CODE THAT WILL RUN IN BACKGROUND        
         postMessage("Response");
    };
}

下面是WebWorker与其余代码之间的连接。从componentDidMount函数下面向WebWorker发送和接收数据。

//BackgroundTaskRunner.js
import * as React from 'react';
import WebWorkerEnabler from './WebWorkerEnabler.js';
import WebWorker from './WebWorker.js';
const workerInstance = new WebWorkerEnabler(WebWorker);
export default class BackgroundTaskRunner extends React.Component {
    componentDidMount(){
        workerInstance.addEventListener("message", e => {
            console.log("Received response:");
            console.log(e.data);
        }, false);
        workerInstance.postMessage("bar");
    }
    render() {
        return (
                <React.Fragment>
                    {"DEFAULT TEXT"}
                </React.Fragment>
        );
    }
}