在react-create-app中使用webWorker的一种解决办法

安装依赖

yarn add react-app-rewired 或者 npm install react-app-rewired
yarn add customize-cra worker-loader babel-loader --dev 或者 npm install customize-cra worker-loader babel-loader --dev

替换package.json中的scripts

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }

在项目根目录下新建config-overrides.js

内容如下

const {
   override,
   addWebpackModuleRule
 } = require("customize-cra");
 
module.exports = {
   webpack: override(
     addWebpackModuleRule({
       test: /\.worker\.(c|m)?js$/i, 
       use: [{
           loader: 'worker-loader',
       },{
         loader: 'babel-loader',
         options: {
           presets: ['@babel/preset-env'],
         },
       }
     ]
     }),
   )
};

应用示例

my.worker.js

onmessage = function (event) {
  const workerResult = event.data;

  workerResult.onmessage = true;

  postMessage(workerResult);
};

index.js

import Worker from './my.worker.js';

const worker = new Worker();

let result;

worker.onmessage = (event) => {
  if (!result) {
    result = document.createElement('div');
    result.setAttribute('id', 'result');

    document.body.append(result);
  }

  result.innerText = JSON.stringify(event.data);
};

const button = document.getElementById('button');

button.addEventListener('click', () => {
  worker.postMessage({ postMessage: true });
});