如何创建使用Web Worker的NPM包？解决React测试路径问题

方法1：通过import.meta.url动态获取Worker文件路径 #

适合保留独立Worker文件的场景，核心是利用ES模块的import.meta.url获取包内文件的正确URL，避免React应用去根目录查找。

• 步骤1：在NPM包的package.json中声明要发布的文件，确保worker.js被包含在内：

{
  "files": [
    "index.js",
    "worker.js"
  ]
}

• 步骤2：在包的入口文件（如index.js）中，通过import.meta.url拼接Worker文件的绝对路径：

// 获取当前模块所在目录的URL
const packageBaseUrl = new URL('.', import.meta.url).href;
// 拼接worker.js的完整URL
const workerUrl = new URL('./worker.js', packageBaseUrl).href;

export function createWorker() {
  // 创建type为module的Worker
  return new Worker(workerUrl, { type: 'module' });
}

• 步骤3：在测试的React应用中，直接导入包的createWorker函数使用即可，无需手动指定路径：

import { createWorker } from 'your-npm-package-name';

const worker = createWorker();
worker.postMessage('Hello from React');

方法2：将Worker代码内联为Blob URL #

如果Worker逻辑不复杂，可以把代码直接内联到包的模块中，生成Blob URL来创建Worker，彻底避免文件路径问题。

示例代码：

// 定义Worker的模块代码（字符串形式）
const workerModuleCode = `
  // Worker内的模块逻辑
  self.onmessage = (event) => {
    const result = \`Processed: \${event.data}\`;
    self.postMessage(result);
  };
`;

export function createInlineWorker() {
  // 创建Blob对象，指定类型为JavaScript模块
  const blob = new Blob([workerModuleCode], { type: 'application/javascript' });
  // 生成Blob URL
  const workerBlobUrl = URL.createObjectURL(blob);
  
  // 创建Worker
  const worker = new Worker(workerBlobUrl, { type: 'module' });
  
  // 监听Worker终止事件，释放Blob URL避免内存泄漏
  worker.addEventListener('terminate', () => {
    URL.revokeObjectURL(workerBlobUrl);
  });
  
  return worker;
}

使用时同样在React应用中导入调用即可，这种方式不需要额外的worker.js文件，打包发布更简洁。

注意事项 #

• 确保你的NPM包使用ES模块规范（package.json中设置"type": "module"），这样import.meta.url才能正常工作。
• 如果Worker代码依赖其他模块，方法2需要将依赖的代码也内联，或者在Worker内部使用动态import()。

内容的提问来源于stack exchange，提问作者Miguel Myers