将web worker捆绑为npm软件包的组成部分，并具有单文件webpack输出

编程问答 2022-06-07

问题描述

我正在编写一个npm包，它是流行库leafletjs的插件。我正在使用webpack打包软件包。我希望此程序包能够按命令生成和销毁某些Web工作者。网络工作者代码是我的源文件的一部分。但是我希望能够将软件包作为npm模块或通过CDN分发，这意味着必须将其编译为单个文件，该文件可以通过HTML标头包含。我正在使用webpack来做到这一点。所以可以说我有一个工作文件：

// sample.worker.js

import { doSomeStuff } from './algorithm.js';

onmessage = function (e) {
  const results = doSomeStuff(e.data)
  postMessage({
    id: e.data.id,message: results',});
};

这很简单，但是这里重要的一点是，我的工作人员实际上是从算法文件中导入一些代码，而该算法文件又是在导入一些节点模块。我的工作人员在某个地方的主模块中使用过，像这样：

// plugin.js

import SampleWorker from 'worker-loader!./workers/dem.worker.js';

export function plugin(){
  // do some stuff
  const worker = new SampleWorker()
  worker.postMessage(someData);
  worker.onmessage = (event) => {};
}

我的webpack配置如下：

module.exports = {
  entry: './src/index',output: {
    path: path.resolve(__dirname,'build'),filename: 'my-plugin.js',},resolve: {
    extensions: ['.ts','.tsx','.js','.json'],module: {
    rules: [
      {
        test: /\.worker\.js$/,loader: 'worker-loader',options: {
          inline: 'fallback',{
        test: /\.(ts|js)x?$/,exclude: /node_modules/,loader: 'babel-loader',],externals: { ... },plugins: { ... }
};

这不能按原样工作-webpack尝试将主捆绑包和每个工作脚本文件以相同的名称捆绑在一起。在filename: '[name].js'下更改为output可以解决此问题，但是给了我很多文件-一个用于主捆绑包，另一个给我的源代码中每个工作文件一个文件。

阅读webpack选项后，我认为使用inline: 'fallback'选项实际上会为每个工作程序创建一个Blob，并将其捆绑到主输出文件中。那没有发生。

到目前为止，我的解决方案是将工作人员写为blob，如下所示：

// workers.js

const workerblob = new Blob([`

  // cannot import in a blob! 
  // have to put algorithm.js code here,copy in any external module code here

  onmessage = function (e) {
    const results = doSomeStuff(e.data)
    postMessage({
      id: e.data.id,message: results,});
  };

`])

export const sampleWorker = URL.createObjectURL(workerblob);

// my-plugin.js
import { sampleWorker } from 'workers.js'

const worker = new Worker(sampleWorker)

这确实有效-Webpack现在输出1个单个文件，其中包含工作程序代码。使用this answer的修改版本，我至少可以将代码放入function( ...code... ){}.toString()格式中，这样至少可以得到智能感知，语法突出显示等。但是我不能使用导入。>

我该如何使用Webpack捆绑我的工作人员，以使整个捆绑最终以1个文件，工作人员代码及所有文件结尾？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascripttypescripttypescripttypescriptweb-workerwebpackwebpackwebpackworker-loader