如何在主webpack项目中使用npm库中的web-worker

Question

我的项目结构是这样的：

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

PROJECTA->我的盖茨比项目，安装moduleA并使用它。

我正在使用这个库将我的工作者和我的其他库代码捆绑到dist文件夹：https://github.com/darionco/rollup-plugin-web-worker-loader

模块A代码：

Workers/index.js

let webWorker = null;

if (typeof window !== "undefined") {
  webWorker = new Worker(new URL("./my.worker.js", import.meta.url), {
    type: "module",
  });
}

export default webWorker;

Workers/My.Worker.js

self.onmessage = (message) => {
  console.log("hii");
  self.postMessage("yes");
};

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

因此您可以看到,现在的工作人员在库的dist中是正确的。这一切都很管用。

如果我们查看index.modern.module.js，您可以看到这是工作代码的输出：

if (typeof window !== "undefined") {
  webWorker = new Worker(new URL("my.worker-f73c7cd4.js", import.meta.url), {
    type: "module"
  });
}

现在，在我的主项目中，我有以下webpack规则将import.meta.url转换为路径，否则webpack将崩溃，因为它无法识别import.meta.url:

 config.module.rules.push({
  test: /\.jsx?$/,
  loader: require.resolve("@open-wc/webpack-import-meta-loader"),
});

我现在运行我的主react项目（它构建在gatsby&webpack中），这是index.modern.module.js中的输出：

if (typeof window !== "undefined") {
  webWorker = new Worker(new URL("my.worker-8e6a623b.js", ({ url: getAbsoluteUrl('node_modules/@tracktak/dcf-react/dist/index.modern.module.js') }).url), {
    type: "module"
  });
}

这是网络请求，你可以看到它贷款进来，但我很确定路径是错误的。它只是说一个200,ok,因为它要到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）的公用文件夹。我需要在这里使用类似worker-loader的东西吗？我只是不确定它如何在这里工作，因为它在我的npm模块中，而不是在我的项目中。

任何帮助都将是伟大的，我会奖励一个赏金！

谢谢

Answer 1

是的，我相信您需要worker-loader。

请注意，200 OK请求的路径深入到node_modules路径中...这可能不是你想要的。

我已经使用worker-loader来帮助解决类似的路径问题。