Javascript 无法绑定要像NPM包一样导入的Web Worker

我的目标是能够发布一个Web Worker NPM包，该包可以正常导入（

import MyPkg from'My pkg'

），而无需用户使用

Worker loader

（内联或其他方式）导入

为了实现这一点，我尝试使用Babel构建脚本以及带有

工作者加载程序的网页

在以下示例中，有两个项目：Web Worker包（“包”），它是连接到测试应用程序（“应用程序”）的
npm链接

该包分为两个文件：
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

//这只是示例代码。这并不重要
//只要代码最终运行，它会做什么
//作为一名网络工作者。
var selfRef=self；
函数示例worker（）{
log（'Running Worker…'）；
setTimeout（函数（）{
//等待10秒钟，然后发布消息
selfRef.postMessage（{foo:bar}）；
}, 10000)
}
module.exports=示例工人

然后，我将该软件包与Webpack捆绑在一起：

package.json

"build": "rm -rf dist/*.* && webpack --progress"

webpack.config.js

module.exports={
模式:"生产",，
devtool:'源映射'，
条目：uuu dirname+'/src/entry.webpack.js'，
输出：{
文件名：“bundle.js”，
路径：_dirname+'/dist'
},
优化：{
最小化：false
}
}

这将生成两个文件：
bundle.js
和一个作为哈希的Web Worker文件：
[hash].Worker.js
，其中包含我们希望在其中计算的代码。但是，其中的关键部分是，因为我们使用
工作加载程序
内联导入，所以webpack编译的输出看起来像：

module.exports=函数（）{
返回新的Worker（uu webpack_urequire_uuu.p+“53dc9610ebc22e0dddef.Worker.js”）；
};

最后，应用程序应该能够导入并使用它，如下所示：

App.js

从“my pkg”导入MyPkg
//在此处记录MyPkg会生成`{}`
const worker=new MyPkg（）
//这会引发一个错误：
//未捕获类型错误：\我的\打包\网页包\导入的\模块\ 4 \默认值。a不是构造函数
worker.onmessage=事件=>{
//这是我们从网络工作者那里收到信息的地方
}

但是，如果您在应用程序本身中按如下方式导入worker build，则可以使其工作：

从'my pkg/dist/53dc9610ebc22e0dddef.worker.js'导入MyPkg

但是，包装要求：

A） 不要求使用该软件包的应用程序必须显式安装
工作加载程序
和
B） 不必显式引用
my-pkg/dist/[hash].worker.js

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


编辑1：我忘了提到我是基于它是如何做的。如果您查看
/src/entry.webpack.js中的内容，并了解它在整个软件包中的工作方式，您将看到一些相似之处。
您可以使用以下选项尝试worker loader：

{
    test: /\.worker\.js$/,
    use: {
        loader: 'worker-loader',
        options: {
            name: '[name].[hash:8].js',
            // notice here
            inline: true,
            fallback: false
        }
    }
},

你解决这个问题了吗？我把下面的答案标记为正确。抱歉没有及时更新此内容。也请查看我对publicPath的评论。要添加到此asnwer，我还需要添加选项
publicPath://my.url.com/
，使其在生产中工作。在dev
中，publicPath
设置为
/
。