使用带有nuxt.js的webpack worker-loader

Question

我正在尝试在nuxt.js框架内使用Web Worker,但不断收到引用错误.ReferenceError: Worker is not defined.

我已经通过npm 安装了worker-loader 1.1.1并将以下规则添加到我的nuxt.config.js:

module.exports = {
  build: {
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      // Web Worker support
      config.module.rules.push({
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' },
        exclude: /(node_modules)/
      })
    }
  }
}

如果我通过nuxt build它创建一个构建,看起来就像创建了一个Web worker文件.

Asset                           Size                      
2a202b9d805e69831a05.worker.js  632 bytes          [emitted]

我在vuex模块中导入它,如下所示:

import Worker from '~/assets/js/shared/Loader.worker.js'

console.log(Worker)
const worker = new Worker // <- this line fails!

在控制台中,我得到了一个看起来像创建worker的函数:

ƒ () {
  return new Worker(__webpack_require__.p + "345c16d02e75e9312f73.worker.js");
}

在工作者内部,我只是有一些虚拟代码,看看它是否真的有效:

const msg = 'world!'

self.addEventListener('message', event => {
  console.log(event.data)
  self.postMessage({ hello: msg })
})

self.postMessage({ hello: 'from web worker' })

Answer 1

首先让我们解决一些问题：

• 工作人员仅在客户端可用->没有ssr

因此，您需要使用no ssr组件，或者需要将应用程序设置为no ssr

有了这些知识，我们将进行nuxt.config.js如下修改：

mode: 'spa',
build: {
  extend(config, { isDev, isClient }) {
    ...
    // Web Worker support
    if (isClient) {
      config.module.rules.push({
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' },
        exclude: /(node_modules)/
      })
    }
  }
}

之后npm run build，npm run start它应该像魅力一样工作。

我为您创建了一个仓库，它是一个标准的nuxt模板，并使用了worker-loader：Github Repo