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

Question

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

为了实现这一点，我尝试使用 Babel 构建脚本以及带有 worker-loader 的 Webpack。

在以下示例中有两个项目:Web Worker 包(“包”)，它是 npm link 到测试应用程序(“App”)。

Package 分为两个文件: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.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。

我也尝试过将构建的 [hash].worker.js' 指定为 package.json 中的 main`，但这也不起作用。

---

编辑 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
        }
    }
},