Vite + React(r3f)项目集成MindAR.js时Web Worker导入配置问题求助

我最近在做一个Vite + React（搭配r3f）的项目，想集成MindAR.js的功能，参考react-three-mind的实现用Web Worker来处理，但怎么都跑不起来。排查下来应该是Vite对Web Worker的配置有遗漏，但试了好几种方法都没解决，来求助大家！

核心问题 #

当我直接导入MindAR源码里的控制器时：

import { Controller as ImageTargetController } from "mind-ar/src/image-target/controller";

会抛出这个错误：

✘ [ERROR] No matching export in "node_modules/mind-ar/src/image-target/controller.worker.js?worker&inline" for import "default"
node_modules/mind-ar/src/image-target/controller.js:4:7:
4 │ import ControllerWorker from "./controller.worker.js?worker&inline";

问题根源在mind-ar/src/image-target/controller.js的第4行，它用Webpack风格的参数导入Worker：

import ControllerWorker from "./controller.worker.js?worker&inline";

这种写法和Vite的Web Worker处理逻辑不兼容。

我已经尝试过的解决方案 #

1. 自定义Worker并尝试覆盖原控制器 #

我写了自定义的Worker文件./workers/controller.worker.js：

export default new Worker(
  new URL('mind-ar/src/image-target/controller.worker.js', import.meta.url),
  { type: 'module' }
);

然后在./mindar-patched.js里尝试覆盖原控制器的Worker：

import * as OriginalController from "mind-ar/src/image-target/controller";
import ControllerWorker from "./workers/controller.worker";

// 尝试覆盖Worker实例
OriginalController.ControllerWorker = ControllerWorker;
export const Controller = OriginalController.Controller;

但这种方式完全没起作用。

2. 在Vite配置中添加别名替换 #

我在vite.config.ts里加了别名，试图替换带参数的Worker导入路径：

alias: {
  "mind-ar/src/image-target/controller.worker.js?worker&inline": path.resolve(__dirname, "src/workers/controller.worker.js")
}

结果还是报同样的错误。

3. 使用打包后的生产版本 #

用MindAR打包好的生产版本导入是能正常运行的，但这种方式完全没法调试：

import { Controller as ImageTargetController } from "mind-ar/dist/mindar-image.prod.js";

我的项目配置 #

Vite配置文件（vite.config.ts） #

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: { "@": path.resolve(__dirname, "./src") },
  },
})

依赖片段（package.json） #

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "mind-ar": "^1.2.5",
  "three": "0.150.1",
  "@react-three/fiber": "^8.15.12",
  "@react-three/drei": "9.88.3"
  // ...其他依赖
},
"devDependencies": {
  "vite": "^5.4.19",
  "@vitejs/plugin-react": "^4.0.0",
  "vite-plugin-worker": "^1.0.5"
  // ...其他开发依赖
}

我怀疑核心是MindAR里用的?worker&inline是Webpack专属语法，Vite不支持？有没有办法让Vite兼容这种Worker导入方式，或者有其他靠谱的补丁方案？

内容来源于stack exchange