4

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

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

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

包分为两个文件：entry.webpack.js和index.worker.js. 该条目在构建和移动到时/dist被指定为mainpackage.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

然后我将 Package 与 Webpack 捆绑在一起：

包.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");
};

最后，应用程序应该能够导入它并像这样使用它：

应用程序.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' as the在 package.json 中指定内置的 main`，但这也不起作用。

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

4

1 回答 1

3

你可以尝试带有选项的worker-loader：

{
    test: /\.worker\.js$/,
    use: {
        loader: 'worker-loader',
        options: {
            name: '[name].[hash:8].js',
            // notice here
            inline: true,
            fallback: false
        }
    }
},
于 2019-09-12T11:30:39.313 回答