Vite/SvelteKit开发环境加载第三方模块Web Worker失败

我开发了一个名为midsommer的Svelte模块，核心功能是通过Web Worker生成自组织映射（Self-Organizing Maps）。在库本地运行时，npm run dev和npm run preview都正常，但将其导入主项目后，仅开发环境（npm run dev）会出现Worker加载失败的问题，生产构建和预览都正常。

两种导入方式的报错情况 #

方式一：使用Vite的?worker&url导入 #

代码实现：

import { onMount } from "svelte";
import workerUrl from "$lib/workers/worker.js?worker&url";

let worker;
onMount(() => {
  worker = new Worker(workerUrl, { type: "module" });
})

主项目开发环境报错：

No matching export in "node_modules/midsommer/dist/workers/worker.js?worker&url" for import "default"

方式二：使用import.meta.url构造Worker路径 #

代码实现：

worker = new Worker(new URL("./../workers/worker.js", import.meta.url), {
  type: "module",
});

主项目开发环境报错：

Internal server error: Failed to resolve import "../classes/som.js" from "node_modules/.vite/workers/worker.js?type=module&worker_file". Does the file exist?

注：../classes/som.js确实存在于midsommer库的正确路径下，但Vite在node_modules/.vite临时目录中找不到该文件。

解决方案 #

1. 调整库的Vite构建配置 #

在midsommer的vite.config.js中，明确Worker的打包规则，确保构建产物包含Worker文件且路径可被主项目解析：

// midsommer/vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';

export default {
  plugins: [sveltekit()],
  worker: {
    format: 'es',
    rollupOptions: {
      output: {
        entryFileNames: 'workers/[name].js',
        chunkFileNames: 'workers/[name].js'
      }
    }
  },
  build: {
    lib: {
      entry: 'src/lib/index.js',
      formats: ['es']
    },
    assetsInclude: ['src/lib/workers/**/*.js']
  }
};

2. 修改库内Worker的导入逻辑 #

改用基于库根目录的绝对路径构造Worker URL，避免相对路径在主项目中解析混乱：

import { onMount } from "svelte";

let worker;
onMount(() => {
  const workerPath = new URL('./workers/worker.js', import.meta.url).href;
  worker = new Worker(workerPath, { type: 'module' });
});

3. 主项目添加Worker解析配置 #

在主项目的vite.config.js中，添加对midsommer库Worker的预构建规则：

// 主项目vite.config.js
export default {
  optimizeDeps: {
    include: ['midsommer/dist/workers/worker.js']
  },
  worker: {
    plugins: [
      {
        name: 'resolve-library-worker',
        resolveId(id) {
          if (id.includes('midsommer/dist/workers/worker.js')) {
            return id;
          }
        }
      }
    ]
  }
};

原因分析 #

• 开发环境中，Vite对node_modules文件的预构建逻辑默认不会处理库内的Worker依赖，导致相对路径解析错误或导出缺失。
• 生产构建时，Vite会完整打包所有依赖资源，包括Worker及其关联文件，因此路径解析正常。

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