J'ai une application React créée avec create-react-app, pas éjectée. J'essaye d'utiliser des web workers. J'ai essayé le package worker-loader (https://github.com/webpack-contrib/worker -loader).

Si j'essaye worker-loader hors de la boîte (import Worker from 'worker-loader!../workers/myworker.js';), j'obtiens le message d'erreur m'indiquant que les chargeurs Webpack ne sont pas pris en charge par Create React App, que je connais déjà.

La solution serait-elle d'éjecter l'application (ce que je préférerais ne pas faire) et de modifier le webpack.config.js ou existe-t-il un autre moyen d'utiliser des travailleurs Web dans une application React?

EDIT: J'ai trouvé la solution ici: https://github.com/facebookincubator/ create-react-app / issues / 1277 (post par yonatanmn)

10
dnmh 24 nov. 2017 à 17:32

3 réponses

Meilleure réponse

Comme je l'ai écrit dans l'EDIT de ma question ci-dessus, j'ai trouvé la solution ici: https://github.com/facebookincubator/create-react-app/issues/1277

Ceci est un exemple de travail:

// 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;

Ensuite, dans le fichier qui doit utiliser le travailleur Web:

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');
18
dnmh 27 nov. 2017 à 11:26

Pour compléter la réponse de dnmh, ce commentaire dans le numéro de github fonctionne parfaitement si vous rencontrez des problèmes avec les sujets "this", "self", "window" ...

Dans mon cas, la suite a résolu tous mes problèmes:

Vous n'avez pas besoin de toucher ce fichier, gardez-le simplement.

//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));
    }
}

C'est là que vous exécutez vos tâches d'arrière-plan

// 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");
    };
}

Et voici la connexion de WebWorker avec le reste de votre code. Vous envoyez et recevez des données à WebWorker à partir de la fonction componentDidMount ci-dessous.

//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>
        );
    }
}
1
Mehmet Kaplan 30 mars 2019 à 17:13

Oui, il est possible d'utiliser une configuration Webpack personnalisée en utilisant custom-react-scripts.

Pour utiliser custom-react-scripts dans votre projet create-react-app existant, comme expliqué dans ce issue, ce que vous devez faire est:

  • Supprimez react-scripts de package.json:

    "devDependencies": {
        "react-scripts": "0.6.1"
    },
    
  • Exécutez npm install --save-dev *your-custom-react-scripts*

Pour une explication plus détaillée, consultez l'article @ kitze et ses propres custom-react-scripts, qui incluent la prise en charge intégrée de fonctionnalités telles que :

  • Décoratrices
  • babel-preset-stage-0
  • Moins
  • Toupet
  • Modules CSS
  • Modules Sass
  • Moins de modules
  • Modules de stylet
2
otorrillas 24 nov. 2017 à 14:55
47475360