我正在尝试在 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");
}
在worker内,我只是有一些虚拟代码来检查它是否有效:
const msg = 'world!'
self.addEventListener('message', event => {
console.log(event.data)
self.postMessage({ hello: msg })
})
self.postMessage({ hello: 'from web worker' })
new Worker()
吗? - lukas-reineke