Web Worker无法识别Import Map，如何正确使用node_modules依赖？

项目目录结构 #

index.html
src
resources
node_modules

index.html 内容 #

<!DOCTYPE html>
<html>
    <head>
        <title>WebGPU App</title>
        <meta charset="UTF-8" />
        <link rel="shortcut icon" href="#"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" typ="text/css" href="resources/css/style.css">       

        <script type="importmap"> { 
            "imports": { 
                "three": "/node_modules/three/build/three.module.js",
                "three/addons/": "/node_modules/three/examples/jsm/",
                "three/nodes": "/node_modules/three/examples/jsm/nodes/Nodes.js" 
            } 
        }     
        </script> 
    </head>
    <body>
        <div id="container"></div>
        <script type="module" src="./src/index.js"></script>
    </body>
</html>

src/three-defs.js 内容 #

import * as THREE from 'three';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { CopyShader } from 'three/addons/shaders/CopyShader.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';

import WebGPU from 'three/addons/capabilities/WebGPU.js';           
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';

import { ShaderNode, MeshBasicNodeMaterial, texture, vec2, vec3, vec4, uv, color, wgslFn, tslFn, attribute, uniform, storage, positionWorld, normalLocal, normalWorld } from 'three/nodes';

export {THREE, WebGPU, WebGPURenderer, OrbitControls, RenderPass, ShaderPass, EffectComposer, CopyShader, ShaderNode, MeshBasicNodeMaterial, texture, color, vec2, vec3, vec4, wgslFn, tslFn, uv, attribute, uniform, storage, positionWorld, normalLocal, normalWorld};

问题 #

主线程通过页面的importmap可以正常导入three-defs.js，但在Worker中使用import {THREE} from 'three-defs.js'完全无效，只能用相对路径import * as THREE from "../node_modules/three/build/three.module.js"才能正常导入。核心原因是Worker作为独立执行上下文，无法读取index.html中的importmap配置，且Worker运行时无明显报错提示，需要可行的解决方法。

1. 创建Worker时显式传递importmap配置 #

Chrome 108+、Edge 108+等现代浏览器支持在创建Worker时，通过importMap选项直接传递模块映射规则，让Worker能识别three这类别名：

// 主线程代码：创建Worker时传入importmap
const importMap = {
  imports: {
    "three": "/node_modules/three/build/three.module.js",
    "three/addons/": "/node_modules/three/examples/jsm/",
    "three/nodes": "/node_modules/three/examples/jsm/nodes/Nodes.js"
  }
};

const worker = new Worker('./src/your-worker.js', {
  type: 'module',
  importMap: importMap
});

配置完成后，Worker内部就能直接使用import {THREE} from './three-defs.js'，和主线程的导入逻辑保持一致。

2. 修改three-defs.js使用相对路径 #

把three-defs.js中的所有模块导入路径改为相对路径，完全脱离对页面importmap的依赖：

// 修改后的src/three-defs.js
import * as THREE from '../node_modules/three/build/three.module.js';

import { OrbitControls } from '../node_modules/three/examples/jsm/controls/OrbitControls.js';
import { CopyShader } from '../node_modules/three/examples/jsm/shaders/CopyShader.js';
// 其他导入路径同理修改为相对路径...

// 导出部分保持不变
export {THREE, WebGPU, WebGPURenderer, OrbitControls, RenderPass, ShaderPass, EffectComposer, CopyShader, ShaderNode, MeshBasicNodeMaterial, texture, color, vec2, vec3, vec4, wgslFn, tslFn, uv, attribute, uniform, storage, positionWorld, normalLocal, normalWorld};

之后Worker中直接用相对路径导入three-defs.js即可：

// Worker内部代码
import {THREE} from './three-defs.js';

3. 使用构建工具统一处理模块导入 #

借助Vite、Webpack这类构建工具打包项目，它们会自动解析模块别名，无需依赖浏览器的importmap，同时能兼容主线程和Worker的模块导入逻辑：

• 以Vite为例，在vite.config.js中配置别名：

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      'three': '/node_modules/three/build/three.module.js',
      'three/addons/': '/node_modules/three/examples/jsm/',
      'three/nodes': '/node_modules/three/examples/jsm/nodes/Nodes.js'
    }
  }
});

构建完成后，主线程和Worker的模块导入都会被自动解析，无需手动处理路径问题。

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