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

Question

我的项目结构是这样的:

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

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

我正在使用这个库将我的工作人员与我的其他库代码捆绑到 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) 的公共(public)文件夹中。我需要使用类似 worker-loader 的东西吗？这里？我只是不确定它在这里如何工作，因为它在我的 npm 模块中而不是在我的项目中。

任何帮助都会很棒，我会悬赏!

谢谢

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

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

Answer 1

更新:

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

然后当你npm publish文件，验证 npm 是否拾取了您期望的内容。

还有另一种方法可以确保它与 npm 的选择性文件捆绑无关。使用 GitHub 存储库 URL 到 npm install <github repo URL> .

原回复:

我相信你需要worker-loader .

我用过 comlink & worker-loader帮助顺利完成 Webpack worker 捆绑。