将 webpack worker-loader 与 nuxt.js 结合使用

我正在尝试在以下范围内使用 Web Workernuxt.js 框架 https://nuxtjs.org/但不断收到参考错误。ReferenceError: Worker is not defined.

我已经安装了工人装载机1.1.1 https://github.com/webpack-contrib/worker-loader通过 npm 并将以下规则添加到我的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看起来网络工作文件已创建。

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!

在控制台中，我得到了一个看起来像创建工作人员的函数：

ƒ () {
  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' })

我们先来解决一些事情：

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

所以你要么需要使用无ssr组件 https://nuxtjs.org/api/components-no-ssr#the-lt-no-ssr-gt-component，或者需要将应用程序设置为 nossr https://nuxtjs.org/api/configuration-build#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)/
      })
    }
  }
}

after npm run build and npm run start它应该像魅力一样发挥作用。

我为您创建了一个存储库，它是一个标准的 nuxt 模板，其中使用了工作加载程序：Github 仓库 https://github.com/Greaka/standardNuxt