无法像 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

然后我将包与 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 和 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
        }
    }
},

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

Unable to bundle a Web Worker to be imported like an NPM package

javascript

web-worker

webpack

worker-loader

npm-package