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

webpack Vue.js

Tony凯

2020-03-20

我正在尝试在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!

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

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

第2545篇《将webpack worker-loader与nuxt.js结合使用》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android