Невозможно связать Web Worker для импорта как пакет NPM

Question

Моя цель - иметь возможность публиковать пакет NPM Web Worker, который можно импортировать в обычном режиме (import MyPkg from 'my-pkg') без необходимости импорта пользователем worker-loader (встроенный или другой)

Для этого я попытался использовать скрипт сборки Babel, а также Webpack с worker-loader,

В следующих примерах есть два проекта: пакет Web Worker ("Пакет"), который npm link Редактировать в тестовое приложение ("Приложение").

Пакет разбит на два файла: entry.webpack.js а также index.worker.js, Запись, когда построена и перемещена в /dist обозначается как main файл в package.json, и в настоящее время он выглядит так:

entry.webpack.js

var MyPkg = require('worker-loader!./index.worker.js')
module.exports = MyPkg

index.worker.js

// This is just example code. It doesn't really matter
// what this code does so long as it ends up being run
// as a Web Worker.

var selfRef = self;

function ExampleWorker () {
  console.log('Running Worker...');
  setTimeout(function () {
    // wait 10 seconds then post a message
    selfRef.postMessage({foo: "bar"});
  }, 10000)
}

module.exports = ExampleWorker

Затем я связываю пакет с Webpack:

package.json

"build": "rm -rf dist/*.* && webpack --progress"

webpack.config.js

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  entry: __dirname + '/src/entry.webpack.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  optimization: {
    minimize: false
  }
}

Это создает два файла: bundle.js и файл Web Worker в виде хэша: [hash].worker.js с кодом, который мы хотим оценить в нем. Они играют ключевую роль в этом, потому что мы использовали worker-loader встроенный в импорт, скомпилированный вывод webpack выглядит примерно так:

module.exports = function() {
  return new Worker(__webpack_require__.p + "53dc9610ebc22e0dddef.worker.js");
};

Наконец, приложение должно иметь возможность импортировать и использовать его следующим образом:

App.js

import MyPkg from 'my-pkg'
// logging MyPkg here produces `{}`

const worker = new MyPkg()
// That throws an Error:
// Uncaught TypeError: _my_pkg__WEBPACK_IMPORTED_MODULE_4___default.a is not a constructor

worker.onmessage = event => {
  // this is where we'd receive our message from the web worker
}

Однако вы можете заставить его работать, если в самом приложении вы импортируете рабочую сборку следующим образом:

import MyPkg from 'my-pkg/dist/53dc9610ebc22e0dddef.worker.js'

Но это требование пакета:

A) НЕ требует, чтобы приложения, использующие пакет, должны были явно установить worker-loader и Б) не должны ссылаться на my-pkg/dist/[hash].worker.js в явном виде.

Я попытался также обозначить встроенный [hash].worker.js' as the main` в package.json, но это тоже не работает.

---

Редактировать 1: я забыл упомянуть, что я все это основываю на том, как react-pdf Является ли. Если вы посмотрите в /src/entry.webpack.js и следите за тем, как это работает в пакете, вы увидите несколько сходств.

Answer 1

Вы можете попробовать рабочий-загрузчик с опцией:

{
    test: /\.worker\.js$/,
    use: {
        loader: 'worker-loader',
        options: {
            name: '[name].[hash:8].js',
            // notice here
            inline: true,
            fallback: false
        }
    }
},