如何在 NextJS 10 中初始化 webworker？

Question

我有一个 Next 10 项目，我正在尝试使用 WebWorkers。工作人员正在像这样初始化：

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.infoWeb Worker 定义中没有收到从postMessage构建版本 ( yarn build && yarn start) 发送的消息，但它在开发版本 ( yarn dev) 上收到。有什么方法可以解决这个问题吗？

Answer 1

这不是一个解决方案。但这可能是一种混乱的工作方式。事实证明这对我来说是一场噩梦。

我的设置和你的一样。正如您在问题中所示，我正在初始化网络工作人员。我从 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 块文件是直接在该.next文件夹下创建的。理想情况下它应该属于.next/static/chunk/[hash].worker.js。

我无法以适当的方式解决这个问题。

所以我做了什么，我将worker.js文件直接放在public目录下。我对worker.js文件进行了转译和优化，并将代码放入public/worker.js文件中。

之后，我修改了worker初始化，如下所示：

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

它现在正在生产构建中。一旦我得到一个更干净的解决方案，我会报告。