如何在Create React App+TypeScript+Webpack5环境中无需loader使用Web Worker

错误修复步骤 #

你遇到的解析错误是Create React App默认Babel配置未兼容import.meta.url语法，且react-refresh热更新插件会对组件内部的Worker实例化逻辑注入异常代码导致的，无需引入额外loader，按以下步骤修改即可：

• 第一步：调整tsconfig.json配置，添加Web Worker相关类型支持：

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM", "WebWorker"],
    "target": "ESNext",
    "module": "ESNext"
  }
}

• 第二步：调整Worker实例化代码位置，将其抽离到组件外部，避免被热更新插件误处理：

// 放在组件声明外部
const testWorker = new Worker(new URL('./test.worker.ts', import.meta.url));

const YourComponent = () => {
  React.useEffect(() => {
    testWorker.postMessage("test");
    // 组件卸载时销毁Worker避免内存泄漏
    return () => testWorker.terminate();
  }, []);

  return <></>
}

• 第三步：如果仍出现解析错误，在项目根目录.env文件添加如下环境变量即可：

DISABLE_NEW_JSX_TRANSFORM=true

Websocket数据流实现方案 #

你不需要在主线程和Worker之间传递socket、rxjs observable这类不可序列化的结构，直接将整套websocket连接、rxjs流处理逻辑放在Worker内部运行即可，完全规避ComLink的RPC模式限制：

Worker侧代码（test.worker.ts） #

import { webSocket } from 'rxjs/webSocket';
import { map, filter } from 'rxjs/operators';

const wsSubject = webSocket('wss://你的websocket服务地址');

self.onmessage = (event) => {
  // 处理主线程发来的控制指令
  switch(event.data.type) {
    case 'connect':
      // 启动ws连接并处理数据流
      wsSubject.pipe(
        filter(msg => Boolean(msg)),
        map(rawMsg => {
          // 自定义流处理逻辑
          return {
            id: rawMsg.id,
            content: rawMsg.content.trim()
          }
        })
      ).subscribe({
        next: (processedData) => {
          // 把处理后的序列化数据发回主线程
          self.postMessage({
            type: 'stream_data',
            payload: processedData
          })
        },
        error: (err) => {
          self.postMessage({
            type: 'error',
            payload: err.message
          })
        }
      })
      break;
    case 'send_msg':
      // 向ws服务发送消息
      wsSubject.next(event.data.payload);
      break;
    case 'close':
      // 关闭ws连接
      wsSubject.complete();
      break;
  }
}

主线程调用示例 #

const testWorker = new Worker(new URL('./test.worker.ts', import.meta.url));

const YourComponent = () => {
  React.useEffect(() => {
    // 启动ws连接
    testWorker.postMessage({ type: 'connect' });
    // 监听Worker发回的数据流
    const handleWorkerMsg = (e: MessageEvent) => {
      if (e.data.type === 'stream_data') {
        console.log('收到处理后的数据：', e.data.payload);
      }
      if (e.data.type === 'error') {
        console.error('Worker报错：', e.data.payload);
      }
    }
    testWorker.addEventListener('message', handleWorkerMsg);

    return () => {
      testWorker.removeEventListener('message', handleWorkerMsg);
      testWorker.postMessage({ type: 'close' });
      testWorker.terminate();
    }
  }, []);

  return <></>
}

内容的提问来源于stack exchange，提问作者Rohit Sharma