Не могу использовать Worker-Loader с Vuejs и Webpack

Question

Я пытаюсь заставить веб-работников работать с Vue cli3, и у меня возникают проблемы с его работой.

Я хочу использовать следующий пакет, рабочий-загрузчик (а не vue-worker), так как он выглядит хорошо поддерживаемым и с большим вкладом.

Следуя их руководству, я попытался изменить веб-пакет, используя vue cli следующим образом:

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

После некоторого поиска в Google я наткнулся на этот пост: https://github.com/webpack/webpack/issues/6642,, который предполагает, что лучший способ исправить это - добавить в веб-пакет следующее:

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')
    }
}

... но все равно я получаю окно не определена ошибка.

Кто-нибудь знает, что идет не так? Кажется, странная ошибка в веб-пакете.

Спасибо!

РЕДАКТИРОВАТЬ: о да, вот страница MDN для веб-работника: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers.

Answer 1

Обновляя классическую конфигурацию vue & webpack, я обнаружил, что для того, чтобы это работало, мне нужно было деактивировать распараллеливание.

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

Answer 2

это то что тебе нужно? Проблема с рабочим-загрузчиком