无法像 NPM 包一样捆绑要导入的 Web Worker

Question

我的目标是能够发布一个可以正常导入的 Web Worker NPM 包（import MyPkg from 'my-pkg'），而不需要用户使用worker-loader（内联或其他方式）导入它

为此，我尝试使用 Babel 构建脚本以及带有 worker-loader 的 Webpack。

在以下示例中，有两个项目：Web Worker 包（“Package”），npm linked 到测试应用程序（“App”）。

包分为两个文件：entry.webpack.js 和index.worker.js。该条目在构建并移动到 /dist 时被指定为 package.json 中的 main 文件，目前看起来像这样：

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

然后我将 Package 与 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应该可以像这样导入并使用它了：

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 和 B) 不必明确引用my-pkg/dist/[hash].worker.js。

我也尝试在 package.json 中指定内置的 [hash].worker.js' as themain`，但这也不起作用。

---

编辑 1：我忘了提到我的所有这些都是基于 react-pdf 是如何做到的。如果您查看 /src/entry.webpack.js 并了解它在整个软件包中的工作方式，您会发现一些相似之处。

Answer 1

您可以尝试使用带有选项的 worker-loader：

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