当第一个参数是变量时，使用 `new URL()` 创建相对 URLs 的行为不同。为什么？

Question

我正在尝试在 NextJs 中实现 web worker，我遵循了他们的 example 但我无法将 worker 亲戚 URL 作为变量传递给 [=15] 这真的让我很烦恼=].

以下代码段是调用工作人员的地方：

import { useEffect, useRef, useCallback } from 'react'

export default function Index() {
  const workerRef = useRef()
  useEffect(() => {
    const workerUrl = '../worker.js';

    console.log({
      URL: new URL('../worker.js', import.meta.url),
      meta: import.meta.url
    });
    console.log({
      URL: new URL(workerUrl, import.meta.url),
      meta: import.meta.url
    });

    workerRef.current = new Worker(new URL('../worker.js', import.meta.url))
    workerRef.current.onmessage = (evt) =>
      alert(`WebWorker Response => ${evt.data}`)
    return () => {
      workerRef.current.terminate()
    }
  }, [])

  const handleWork = useCallback(async () => {
    workerRef.current.postMessage(100000)
  }, [])

  return (
    <div>
      <p>Do work in a WebWorker!</p>
      <button onClick={handleWork}>Calculate PI</button>
    </div>
  )
}

这奇怪地记录：

{
  "URL":"/_next/static/media/worker.3c527896.js",
  "meta":"file:///home/omar/CODE/NextJs/lullo/with-web-worker-app/pages/index.js"
}
    
{
  "URL":"file:///home/omar/CODE/NextJs/lullo/with-web-worker-app/worker.js",
  "meta":"file:///home/omar/CODE/NextJs/lullo/with-web-worker-app/pages/index.js"
}

这到底有什么不同：

    const workerUrl = '../worker.js';

    console.log({
      URL: new URL('../worker.js', import.meta.url),
      meta: import.meta.url
    });
    console.log({
      URL: new URL(workerUrl, import.meta.url),
      meta: import.meta.url
    });

问题是我无法将 URL 作为 prop 传递给某些通用工作调用者。我收到烦人的错误：

SecurityError: Failed to construct 'Worker': Script at 'file:///home/omar/CODE/NextJs/lullo/client/src/utils/WebWorkers/postErrorToServer.ts' cannot be accessed from origin 'http://localhost:3000'.

Answer 1

这可能是因为第一种情况：

const workerUrl = '../worker.js';
const url = new URL(workerUrl, import.meta.url);

webpack 将 URL 视为动态的，无法在编译时正确地捆绑 web worker。如果您按如下方式定义工作人员，则会发生类似的情况：

const url = new URL('../worker.js', import.meta.url);
const worker = new Worker(url);

This comment 在 webpack 的 GitHub 仓库中的讨论可能对您的情况有所帮助。由于上述原因，我不认为 worker URL 可以是真正动态的 - webpack 需要在编译时知道 worker 脚本的 url。

当第一个参数是变量时，使用 `new URL()` 创建相对 URLs 的行为不同。为什么？

Creating relative URLs with `new URL()` behaves differently when first param is a variable. WHY?

reactjs

url

next.js

web-worker