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

Question

我的项目结构是这样的：

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

安装并使用moduleA的gatsby项目的projectA ->。

我使用这个库将我的工作人员和其他库代码捆绑到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，您可以看到这是worker代码的输出：

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

现在，在我的主项目中，我使用了这条webpack规则将import.meta.url转换为路径，否则，由于无法识别import.meta.url，webpack会崩溃

 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模块中，而不是在我的项目中。

任何帮助都是很棒的，我会奖励你的！

谢谢

编辑:看起来worker-plugin让我更接近解决方案了。如果我在我的主项目中使用它，并将dist输出中的web worker从this：new URL("my.worker-8e6a623b.js", ({ url: getAbsoluteUrl('node_modules/@tracktak/dcf-react/dist/index.modern.module.js') }).url)修改为this：new URL("my.worker-8e6a623b.js")，它工作得很好，因为worker-plugin只接受字符串参数。

然而，这不是一个可持续的解决方案，因为很明显我不想修改dist文件。

Answer 1

更新：

验证dist文件夹内容是否正确。我很惊讶地看到来自旧版本的文件(多个散列ids)。清理文件夹，然后生成所有脚本(出于性能原因，您可能希望仅在生产版本上执行此操作)。

然后，当您npm publish这些文件时，验证npm获得了您所期望的内容。

有一种替代方法可以确保它不与npm的选择性文件捆绑相关。使用npm install <github repo URL>的GitHub存储库URL。

原始响应：

我相信你需要worker-loader。

我已经使用了comlink & worker-loader来帮助平滑处理Webpack的工人捆绑。