如何在 npm 模块上使用 web worker [英] How to use web worker on a npm module

问题描述

我正在编写一个 JavaScript 库，我正在使用一个网络工作者.我正在使用 webpack(带有 worker-loader)来创建我的构建.图书馆一切正常.

I'm writing a JavaScript library and I'm using a web worker. I'm using webpack (with worker-loader) to create my build. Everything is working fine on the library.

webpack.config.js

webpack.config.js

{
    test: /app.worker.ts$/,
    include: [
        path.resolve(__dirname, 'src/')
    ],
    use: [
        {
            loader: 'babel-loader',
        },
        {
            loader: 'worker-loader',
            options: {
                name: 'app.worker.js',
            }
        }
    ]
}

产生:

/dist/app.bundle.js // my main library build
/dist/app.worker.js // my worker build

当我尝试在 react-application 上导入我的库时，我的库尝试像这样加载 worker:http://localhost:3000/dist/app.worker.js.这显然失败了，因为它位于 node_modules/.../dist/app.worker.js.

When I try to import my library on a react-application, my library try yo load the worker like this: http://localhost:3000/dist/app.worker.js. which obviously fail because it's located in node_modules/.../dist/app.worker.js.

我可能没有正确使用 worker-loader.

I probably don't use worker-loader correctly.

感谢您的帮助

推荐答案

好的，我刚刚发现问题.我不知道为什么，但问题与纱线链接有关.如果我将 package.json 中的 link: 替换为 file:，我就不再有问题了.

ok, I just found the problem. I don't know why but the issue is related to yarn link. If I replace the link: with file: in my package.json, I don't have the problem anymore.

另一种(非最佳)解决方案是使用 inline:true.

Another (non optimal) solution is to use inline:true.

有人知道纱线链接的解决方案或解决方法吗?谢谢！

Anyone know a solution or a workaround with yarn link ? Thanks !

这篇关于如何在 npm 模块上使用 web worker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！