Web Worker中使用importScripts加载constants.js报错求助

你遇到的报错核心原因有两个：

1. 用Blob包装Worker代码创建实例时，importScripts的相对路径是基于Blob的临时URL（blob://开头），而非原worker.js文件的实际路径，导致无法定位constants.js。
2. 代码同时混用了ES模块的import语法和经典Worker的importScripts加载方式，两种机制无法在同一个Worker环境中并存。

以下是几种可落地的解决方案：

方案1：改用模块模式Web Worker（推荐） #

符合现代ES模块规范，能正常加载同路径常量文件：

1. 保持constants.js不变 #

export const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"];

2. 修改worker.js #

直接在Worker脚本中使用ES模块导入，同时让WebWorkerBuilder创建模块类型的Worker：

// 直接定义Worker的模块脚本内容，避免函数toString的路径问题
export const workerCode = `
  import { WEEKDAYS } from './constants.js';

  self.onmessage = ({ data }) => {
    const { command } = data;
    if (command === 'log') {
      postMessage(WEEKDAYS[0]);
    }
  };
`;

export class WebWorkerBuilder {
  constructor(code) {
    const blob = new Blob([code], { type: 'application/javascript' });
    // 创建模块模式的Worker
    return new Worker(URL.createObjectURL(blob), { type: 'module' });
  }
}

3. 修改Seesaw.js调用方式 #

import React, { useEffect, useState } from 'react';
import { WebWorkerBuilder, workerCode } from './worker';

const Seesaw = () => {
  const [worker, setWorker] = useState(null);

  useEffect(() => {
    const worker = new WebWorkerBuilder(workerCode);
    worker.onmessage = ({ data }) => console.log(data);
    // 发送测试命令
    worker.postMessage({ command: 'log' });

    setWorker(worker);
    return () => worker.terminate();
  }, []);

  return <></>;
};

export default Seesaw;

方案2：适配经典Worker的UMD格式常量 #

如果需要兼容旧环境，无法使用模块模式，可将常量改为UMD格式，同时传递绝对路径确保importScripts能找到文件：

1. 修改constants.js为UMD格式 #

(function (global, factory) {
  if (typeof exports === 'object' && typeof module === 'object') {
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    define(factory);
  } else {
    global.WEEKDAYS = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {
  return ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"];
}));

2. 修改worker.js #

export const myworker = (constantsUrl) => {
  importScripts(constantsUrl);

  self.onmessage = ({ data }) => {
    const { command } = data;
    if (command === 'log') {
      postMessage(self.WEEKDAYS[0]);
    }
  };
};

export class WebWorkerBuilder {
  constructor(worker, constantsUrl) {
    // 将绝对路径传入Worker函数
    const code = `(${worker.toString()})('${constantsUrl}')`;
    const blob = new Blob([code]);
    return new Worker(URL.createObjectURL(blob));
  }
}

3. 修改Seesaw.js传递绝对路径 #

import React, { useEffect, useState } from 'react';
import { WebWorkerBuilder, myworker } from './worker';

const Seesaw = () => {
  const [worker, setWorker] = useState(null);

  useEffect(() => {
    // 获取constants.js的绝对路径
    const constantsUrl = new URL('./constants.js', import.meta.url).href;
    const worker = new WebWorkerBuilder(myworker, constantsUrl);
    worker.onmessage = ({ data }) => console.log(data);
    worker.postMessage({ command: 'log' });

    setWorker(worker);
    return () => worker.terminate();
  }, []);

  return <></>;
};

export default Seesaw;

方案3：直接内联常量（适合小体积常量） #

如果常量内容不多，可直接内联到Worker代码中，彻底避免路径问题：

// worker.js
// 主进程和Worker共享的常量
export const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"];

export const myworker = () => {
  const WEEKDAYS = ${JSON.stringify(WEEKDAYS)};

  self.onmessage = ({ data }) => {
    const { command } = data;
    if (command === 'log') {
      postMessage(WEEKDAYS[0]);
    }
  };
};

export class WebWorkerBuilder {
  constructor(worker) {
    const code = worker.toString();
    const blob = new Blob(['(' + code + ')()']);
    return new Worker(URL.createObjectURL(blob));
  }
}

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