module - 从具有相对路径的模块中引用网络 worker

Question

长话短说:我有一个模块 baz.ts 和一个 web-worker 脚本 worker.ts 在同一个文件夹中彼此相邻，但是 worker当我使用同一文件中的相同相对路径引用它时不会加载(对于工作人员，我显然正在加载 js 文件)。模块编译为 AMD 语法。

我有以下文件夹布局:

MyApp
|-- tests
|   `-- test-a
|       |-- test.html
|       `-- test.ts
`-- lib
    |-- foo.ts
    `-- foo
        |-- 
        |-- bar.ts   <-- 'bar/worker' loaded here
        `-- bar
            |-- baz.ts
            `-- worker.ts

foo.ts、bar.ts、baz.ts 是模块，foo.ts 是导入的在 tests/test-a/test.ts 中，它被相邻的 test.html 使用(这是代码运行的地方)。其余的依赖关系很容易通过文件夹布局可视化:foo.ts 导入 bar.ts，后者又导入 baz.ts 和从 worker.ts 创建一个 worker —— 更准确地说，从编译的 .js 输出:

bar.ts

import {Baz} from "./bar/baz";

export class Bar {
    constructor() {
        var worker = new Worker("./bar/worker.js"); // same path as the above import
        // ...
    }
}

查看 baz.ts 和 worker.ts 如何位于相对于 bar.ts 的同一文件夹中(对应的 .js 文件是在适当的位置创建的)，但工作人员不会加载。它尝试加载 url tests/foo/bar/worker.js。

我怎样才能做到这一点，以便我可以使用与导入它旁边的模块相同的相对路径来引用工作人员？

Answer 1

这很奇怪。

通常你发出的请求(或资源加载)是相对于加载的 html 文件的 url，但如果是这样的话(正如我在评论中写的那样)它应该尝试从加载 worker tests/test-a/bar/worker.js.

你可以做的是为你的 worker 建立一个绝对 url 并使用它，比如:

let url = new URL("lib/foo/bar.js", window.location.origin);
let worker = new Worker(url.toString());

可能不理想，但应该可以。