typescript Webworker导入无法解析

xqkwcwgp 于 2022-12-24 发布在 TypeScript

关注(0)|答案(1)|浏览(215)

我正在尝试调整这个组件：https://github.com/Lucas-C/Nonogram
我添加了src文件夹到我的项目中。当使用Game和Editor类时，没有出现任何问题。但是，当我尝试导入Solver类时，我得到了一个错误：

@parcel/core: Failed to resolve 'worker!./worker.ts’ from from './nonogram_lib/Solver.ts’

此导入似乎失败。如何修复？

import SolverWorker from 'worker!./worker.ts'

我的包裹

"dependencies": {
    "parcel": "^2.8.0"
  },
  "devDependencies": {
    "typescript": "^4.6.4"
  },

我的tsconfig.json：

{
  "compilerOptions": {
    "noEmit": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "es6"
  }
}

1条答案

Solver.ts中的此行导致问题。

import SolverWorker from 'worker!./worker.ts'

export default class Solver extends Nonogram {
  worker: Worker = new SolverWorker()
// ...

就像@webelo在评论中指出的那样，worker!前缀是一个汇总插件提示，如果你检查原始repo使用rollup-plugin-bundle-worker的话。
因为您使用包裹作为捆绑器，所以您需要将其转换为包裹的方式来导入工人，这应该是：

export default class Solver extends Nonogram {
  worker: Worker = new Worker(
    new URL('worker.ts', import.meta.url),
    {type: 'module'}
  );

值得注意的是，new URL('worker.ts', import.meta.url)和new Worker(...)，尽管都是web标准API，但它们实际上在幕后混合了一些包魔术。