javascript - 如何在 NextJS 10 中初始化 webworker？

Question

我有一个 Next 10 项目，我正在尝试使用 WebWorkers。 worker 正在被初始化，如下所示:

window.RefreshTokenWorker = new Worker(new URL('../refreshToken.worker.js', import.meta.url))

我也将 Worker 定义为

self.addEventListener('message', (e) => {
  console.info("ON MESSAGE: ", e)
  // some logic with e.data
})

它也被这样称呼:

const worker = getWorker() // gets worker that is attached at the window level
worker.postMessage('start')

我的 next.config.js文件定义为

const nextConfig = {
  target: 'serverless',
  env: getBuildEnvVariables(),
  redirects,
  rewrites,
  images: {
    domains: []
  },
  future: { webpack5: true },
  webpack (config) {
    config.resolve.alias['@'] = path.join(__dirname, 'src')
    return config
  }
}

// more definitions

module.exports = nextConfig

我遇到的问题是 console.info在 Web Worker 定义中没有收到从 postMessage 发送的消息在构建版本( yarn build && yarn start )上，但它在开发版本( yarn dev )上。有什么办法可以解决这个问题？

Answer 1

这不是解决方案。但可能是一种困惑的方式来完成这项工作。事实证明，这对我来说是一场噩梦。
我的设置和你的一样。正如您在问题中显示的那样，我正在初始化网络 worker 。我从 nextjs 文档本身得到了这个想法:https://nextjs.org/docs/messages/webpack5

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

我在 dev 工作时一切正常模式。它正在接收worker.js文件正确，一切看起来都很好。
但是当我构建 nextjs 并尝试它时，web worker 将无法工作。当我深入研究这些问题时，我发现 worker.js block 文件是直接在 .next 下创建的。文件夹。它应该属于 .next/static/chunk/[hash].worker.js理想情况下。
我无法以适当的方式解决这个问题。
所以我做了什么，我把我的worker.js public 下的文件目录。我把我的 worker.js文件转译和优化，并将代码放在 public/worker.js文件。
在此之后，我像这样修改了worker初始化:

const newWebWorker = new Worker('/worker.js', { type: 'module' });

它现在正在生产版本中工作。一旦我得到一个更清洁的解决方案，我会报告。