Javascript 将web workers捆绑为npm包的组成部分，并提供单文件web包输出

我正在写一个npm包，它是流行的JS库的插件。我正在使用webpack打包软件包。我希望这个包能够根据命令生成和销毁一些web工作人员。web worker代码是我的源文件的一部分。但我希望能够将我的包作为npm模块分发，或者通过cdn分发，这意味着它必须被编译成可以通过HTML头包含的单一文件。我正在使用网页包做这件事。假设我有一个worker文件：

//sample.worker.js
从'./algorithm.js'导入{doSomeStuff}；
onmessage=函数（e）{
const results=doSomeStuff（如数据）
邮递({
id:e.data.id，
信息：结果'，
});
};

相当简单，但这里有一点很重要，我的工作人员实际上是从算法文件中导入一些代码，这反过来又导入了一些节点模块。我的worker在主模块的某个地方使用，如下所示：

//plugin.js
从“worker loader！”导入SampleWorker/工人/dem.worker.js'；
导出函数插件（）{
//做点什么
const-worker=新的SampleWorker（）
worker.postMessage（someData）；
worker.onmessage=（事件）=>{}；
}

我的网页包配置如下所示：

module.exports={
条目：'./src/index'，
输出：{
path:path.resolve（uu dirname，'build'），
文件名：“my plugin.js”，
},
决心：{
扩展：['.ts'、'.tsx'、'.js'、'.json']，
},
模块：{
规则：[
{
测试：/\.worker\.js$/,，
加载器：“工作加载器”，
选项：{
内联：“回退”，
},
},
{
测试：/\（ts|js）x？$/，
排除：/node_模块/，
加载器：“巴别塔加载器”，
},
],
},
外部：{…}，
插件：{…}
};

这不按原样工作-webpack尝试以相同的名称捆绑主捆绑包和每个辅助脚本文件。更改为

output

下的

filename:'[name].js'

可以解决此问题，但会为我提供许多文件—一个文件用于主捆绑包，另一个文件用于源代码中的每个辅助文件

阅读webpack选项时，我认为使用

内联：“fallback”

选项实际上会为每个worker创建一个Blob，并将其捆绑到主输出文件中。这并没有发生

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

//workers.js
const workerblob=新Blob([`
//无法在blob中导入！
//必须将algorithm.js代码放在这里，复制任何外部模块代码
onmessage=函数（e）{
const results=doSomeStuff（如数据）
邮递({
id:e.data.id，
信息：结果，
});
};
`])
export const sampleWorker=URL.createObjectURL（workerblob）；
//my-plugin.js
从'workers.js'导入{sampleWorker}
const worker=新的worker（sampleWorker）

这实际上是可行的-webpack现在输出一个包含工作代码的文件。使用来自的修改版本，我至少可以将代码放在

函数（…code…{}.toString（）

格式中，这样我至少可以获得intellisense、语法突出显示等，但我不能使用导入

---

如何使用webpack捆绑我的工作程序，使整个捆绑程序最终包含在一个文件、工作程序代码和所有文件中？

我根本不知道webpack，但从原始角度看，您需要将工作程序脚本作为文本导入文件中（显然，原始加载程序会这样做），但您也需要它来解释内部导入。最好的办法是在最后你有

const imported_script=`[script content]`；const worker_script=`${imported_script}worker script content`；const worker\u url=url.createObjectURL（新Blob（[worker\u content]））

。可以手动完成，但再一次，我不知道如何使用webpack…所以这很有趣…它解决了我无法使用导入的问题，但它无法解决在字符串中编写代码的问题。我刚才提到的解决了字符串问题，但没有解决导入问题。我想我可以在另一个环境中开发

工作者脚本内容

，然后复制粘贴。我想知道是否有办法同时解决这两个问题？@kaido！我不确定这是否合适，但我昨天发布了另一个问题，你正是我希望看到它的人，正如你过去在画布和图像处理方面所做的帮助：