不能将Worker-Loader与Vuejs和Webpack一起使用

Question

我正在尝试让web workers启动并运行Vue cli3，但我遇到了麻烦，无法让它正常工作。

我想使用下面的包worker-loader（而不是vue-worker)，因为它看起来维护得很好，而且有更多的贡献。

在他们的教程之后，我尝试使用vue cli修改webpack，如下所示：

module.exports = {
    chainWebpack: config => {
        config.module
          .rule('worker-loader')
          .test(/\.worker\.js$/)
          .use('worker-loader')
            .loader('worker-loader')
            .end()
    }
}

我希望能和他们的相配

{
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
    ]
  }
}

可以在这里阅读（https://github.com/webpack-contrib/worker-loader）。我尽可能地遵循vue cli3的文档（在这里可以找到:https://cli.vuejs.org/guide/webpack.html#simple-configuration)。

我的组件非常简单：

import Worker from 'worker-loader!./../../sharedComponents/equations/recurringTimeComposer.js';

<...>
watch:{

 recurringPaymentReturnObj: function(newVal, oldVal){
        const myWorker = new Worker;
        myWorker.postMessage({ hellothere: 'sailor' });
        myWorker.onmessage = (e) => {
            console.log('value of e from message return', e.data);
 }
}
<...>

并且在我的./../../SharedComponents/Equations/RecurringTimeComposer.js文件中有：

onmessage = function(e) {
    console.log('Message received from main script: ', e.data);
    // var workerResult = 'Result: ' + e.data;
    // console.log('Posting message back to main script');
    postMessage('hello back handsome');
    close();
}

我不断收到错误消息：

ReferenceError: window is not defined a162426ab2892af040c5.worker.js:2:15

在搜索了一下之后，我发现了这篇文章:https://github.com/webpack/webpack/issues/6642，它建议解决这一问题的最好方法是在webpack中添加以下内容：

output: {
       path: path.join(__dirname, 'dist'),
       filename: 'bundle.js'
       publicPath: 'http://localhost:3000',
       globalObject: 'this'
},

修改我的vue.config.js文件后，我有：

module.exports = {
    chainWebpack: config => {
        config.module
          .rule('worker-loader')
          .test(/\.worker\.js$/)
          .use('worker-loader')
            .loader('worker-loader')
            .end()
        config
            .output
            .path(path.join(__dirname, 'dist'))
            .filename('bundle.js')
            .publicPath('http://localhost:8080')
            .globalObject('this')
    }
}

...但我仍然得到窗口未定义错误。

有人知道哪里出了问题吗？这似乎是webpack中的一个怪异错误。

谢谢！

编辑：哦，是的，这里也是webworker的MDN页面:https://developer.mozilla.org/en-us/docs/web/api/web_workers_api/using_web_workers。

Answer 1

作为Javascript的新手，在尝试使用web workers和VUEJS时，我不断地回到这个问题。我从未设法使它与vue-worker或worker-loader一起工作。

现在是2020年，谷歌发布了Worker-Plugin。

要使用它，请创建一个包含两个文件index.js和worker.js的模块my-worker。

index.js创建模块：

const worker = new Worker('./worker.js', { type: 'module' });

const send = message => worker.postMessage({
  message
})

export default {
  worker,
  send
}

worker.js包含以下逻辑：

import _ from 'lodash'
addEventListener("message", async event => {
    let arrayToReverse = event.data.message.array
    let reversedArray = _.reverse(arrayToReverse)
    // Send the reversed array
    postMessage(reversedArray)
});

您还需要更新vue.config.js以使用WorkerPlugin:

const WorkerPlugin = require('worker-plugin')
module.exports = {
  configureWebpack: {
    output: {
      globalObject: "this"
    },
    plugins: [
      new WorkerPlugin()
    ]
  }
};

现在您可以在组件中使用worker：

1. 使用从“@/my-worker”导入worker导入它。
2. 使用worker.worker.onmessage=event=>{//接收postMessage时执行某些操作}
在 mounted（）生命周期钩子中设置侦听器
3. 使用worker.send（有效负载）启动工作程序。

我在GitHub上设置了一个起始代码。但我还是没能让HMR工作...