我正在尝试在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' })