typescript - 從具有相對路徑的模組引用 web-worker

長話短說：我有一個模組 baz.ts 和一個 Web Worker 腳本 worker.ts，它們位於同一個資料夾中相鄰的文件，但當我從同一個文件使用相同的相對路徑引用它時，Worker 不會加載（在 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，而 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 檔案是在原地創建的），然而 worker 卻無法加載。它嘗試加載的網址是 tests/foo/bar/worker.js。

我該如何設置，以便我可以使用與導入旁邊模塊相同的相對路徑來引用 worker？

答案＃1

這很奇怪。

通常你所發出的請求（或資源加載）是相對於已加載 HTML 文件的 URL，但如果是這種情況的話（正如我在評論中所寫的），它應該已經嘗試從 tests/test-a/bar/worker.js 加載 worker。

你可以做的是為你的 worker 建立一個絕對 URL 並使用它，像這樣：

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

可能不是理想的，但應該可以用。