Firefox中Web Workers用importScripts替代three.js模块导入报错求助

问题核心 #

你遇到的矛盾是：Firefox中直接用ES模块加载Worker报错，换成importScripts后，three.js模块版本的export语法又在非模块环境下报错。本质是ES模块语法只能在模块环境中运行，而importScripts加载的是普通脚本，不支持模块语法。

方案1：让Firefox原生支持Worker ES模块（推荐，针对新版Firefox） #

如果你的目标Firefox版本≥114（Firefox 114及以上正式支持Web Worker ES模块），可以直接保留ES模块写法，无需替换成importScripts：

1. 恢复Worker文件中的ES模块导入语句：

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.124/build/three.module.js';
import {texture_splatter} from './texture-splatter.js';
import {math} from '/shared/math.mjs';
import {noise} from '/shared/noise.mjs';
import {terrain_height} from '/shared/terrain-height.mjs';

2. 检查Worker初始化的路径和配置：
   • 确保Worker脚本的路径（src/terrain-builder-threaded-worker.js）是相对于主脚本文件的位置，而非HTML文件
   • 保留{type: 'module'}配置，这是告诉浏览器以模块方式加载Worker：

this._worker = new Worker(s, {type: 'module'});

3. 验证跨域导入权限：
   jsdelivr的three.js模块支持CORS，无需额外配置，若使用其他CDN需确保对方开启了CORS。

方案2：兼容旧版Firefox（无ES模块支持） #

如果必须兼容低于114的Firefox版本，需要将所有依赖转为普通脚本：

步骤1：替换three.js为全局版本 #

将Worker中的three.js模块导入，换成UMD全局版本（无export语法，直接暴露THREE全局对象）：

importScripts('https://cdn.jsdelivr.net/npm/three@0.124/build/three.min.js');

步骤2：修改自定义模块为全局暴露 #

你的自定义模块（texture-splatter.js、math.mjs等）如果用了ES模块的export，需要改成在Worker全局作用域（self）中暴露变量：

• 比如texture-splatter.js：
  把export {texture_splatter}改为：

self.texture_splatter = texture_splatter;

• 同理，math.mjs：

self.math = math;

• noise.mjs：

self.noise = noise;

• terrain-height.mjs：

self.terrain_height = terrain_height;

步骤3：用importScripts加载所有依赖 #

修改Worker文件的导入逻辑为：

importScripts('https://cdn.jsdelivr.net/npm/three@0.124/build/three.min.js');
importScripts('./texture-splatter.js');
importScripts('/shared/math.mjs');
importScripts('/shared/noise.mjs');
importScripts('/shared/terrain-height.mjs');

步骤4：移除Worker初始化的模块配置 #

因为现在加载的是普通脚本，不需要{type: 'module'}：

this._worker = new Worker(s); // 去掉{type: 'module'}参数

为什么之前的替换思路会报错？ #

• three.js的three.module.js是专门为ES模块设计的，包含export语法，在非模块环境（普通脚本）中运行时，浏览器会将export视为非法语法，抛出错误
• importScripts只能加载普通脚本，无法解析ES模块的import/export语法，所以直接替换导入语句会导致模块语法报错

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