Javascript 如何将npm库中的web worker用于主web包项目

我的项目结构如下：

moduleA->我使用汇总发布到npm的库

projectA->My gatsby项目，安装并使用moduleA

我正在使用此库将我的工作人员与其他库代码捆绑到dist文件夹中：

模块A代码：

workers/index.js

让webWorker=null；
如果（窗口类型！=“未定义”）{
webWorker=newworker（新URL（“./my.Worker.js”，import.meta.URL）{
类型：“模块”，
});
}
导出默认webWorker；

workers/my.worker.js

self.onmessage=（message）=>{
控制台日志（“hii”）；
self.postMessage（“是”）；
};

当我构建上述库时，结果如下：

因此，您可以看到工作人员现在正确地位于图书馆区。这一切都很好

如果我们查看

index.modern.module.js

，您可以看到这是工作代码的输出：

if（窗口类型！=“未定义”）{
webWorker=newworker（新URL（“my.Worker-f73c7cd4.js”，import.meta.URL）{
类型：“模块”
});
}

现在，在我的主要项目中，我有一个网页规则来将

import.meta.url

转换为路径，否则网页会崩溃，因为它无法识别

import.meta.url

：

config.module.rules.push({
测试：/\.jsx？$/,，
加载程序：require.resolve（“@open wc/webpack import meta loader”），
});

现在我运行我的主要react项目（它内置于gatsby&webpack中），这是

index.modern.module.js

中的输出：

if（窗口类型！=“未定义”）{
webWorker=new Worker（新URL（“my.Worker-8e6a623b.js”）（{URL:getAbsoluteUrl（'node_modules/@tracktak/dcf react/dist/index.modern.module.js'））））.URL）{
类型：“模块”
});
}

这是网络请求，您可以在中看到它，但我很确定路径是错误的。它只是说200行，因为它将进入404页，我想：

它给了我一个控制台错误：

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

所以，我的问题是。如何将web worker加载到Gatsby项目（projectA）的公用文件夹中。我是否需要在这里使用类似于

工作者加载程序的东西？我只是不确定它在这里如何工作，因为它在我的npm模块中，而不是在我的项目中

任何帮助都会很好，我会赏金的

谢谢

编辑：看来我离解决方案越来越近了。如果我在我的主项目中使用它并从中修改dist输出中的web工作者：
newurl（“my.worker-8e6a623b.js”），（{URL:getAbsoluteUrl（'node_modules/@tracktak/dcf react/dist/index.modern.module.js'）））.URL）
到这个：
newurl（“my.worker-8e6a623b.js”）
工作正常，因为worker插件只接受字符串参数

但是，这不是一个可持续的解决方案，因为我显然不想修改dist文件。
更新：
验证dist文件夹内容是否正确。看到来自旧版本（多个散列ID）的文件，我感到惊讶。清理文件夹，然后生成所有脚本（出于性能原因，您可能只希望在生产版本上执行此操作。）

然后，当您
npm发布文件时，请验证npm是否收到了您期望的内容

有另一种方法可以确保它与npm的选择性文件绑定无关。使用GitHub repo URL进行npm安装

原始答复：
我相信您需要
工人加载器

我使用了
comlink
和
worker loader
来帮助平滑Web包工作绑定



“网络”选项卡的“预览”显示了什么？是代码吗？@DanLevy它说：“加载响应数据失败”。这意味着它很可能根本不加载worker脚本，而是加载一个html网页。因此，我在worker构造函数中的路径似乎是错误的。我对你的回答有一个问题，你是否愿意接受一个简单的解决方案，而不是你的插件？@JRichardsz绝对如此。我愿意接受简单的解决方案。即使它不能完全解决这个问题，那也太好了，因为我对这个问题太迷茫了。但是worker loader要求您像这样导入worker:import MyWorker from./my.worker.js`const-worker=new MyWorker（），我想无论如何，那么，如果我不能访问node module dist bundle中的代码，我该怎么做呢？我正在寻找一些类似的代码，我最近在这个项目中做过：我意识到我破解了一个解决方案。。。我将我的库复制到主项目文件夹中，去掉了不同的构建工具（rollup和webpack）。我的计划是保留library package.json，这样我仍然可以在NPM上维护包-只是一个稍微不同的CLI发布过程。在这个过程中，我发现了一些有用的资源-我将看看是否可以找到我的笔记；我在这方面做了很多研究。以下是我特别链接到的GitHub问题评论：