如何使用 npm 库中的网络工作者进入主 webpack 项目

Question

我的项目结构是这样的：

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

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

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

模块 A 代码：

工人/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;

工人/my.worker.js

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

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

所以你可以看到工作人员现在正确地在图书馆的 dist 中。 这一切都很好。

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

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

Now in my main project I have this webpack rule to convert the import.meta.url to a path otherwise webpack crashes as it does not recognize import.meta.url :

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

我现在运行我的主要反应项目（内置在 gatsby 和 webpack 中），这是 index.modern.module.js 中的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 好，因为我认为它将进入 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 工作程序加载到我的 Gatsby 项目 (projectA) 的公用文件夹中。 我需要在这里使用类似worker-loader东西吗？ 我只是不确定它如何在这里工作，因为它在我的 npm 模块中，而不是在我的项目中。

任何帮助都会很棒，我会奖励赏金！

谢谢

编辑：似乎工人插件让我更接近解决方案。 If I use this in my main project and modify the web workers in the dist output from this: new URL("my.worker-8e6a623b.js", ({ url: getAbsoluteUrl('node_modules/@tracktak/dcf-react/dist/index.modern.module.js') }).url) to this: new URL("my.worker-8e6a623b.js")它工作正常，因为worker-plugin只接受字符串arguments。

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

Answer 1

更新：

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

然后，当您npm publish文件时，请验证 npm 是否符合您的预期。

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

原始回复：

我相信你需要worker-loader 。

我使用comlink和worker-loader来帮助平滑 Webpack 工人捆绑。