时间戳

首页 > 解决方案 > 在 webpack 库中加载 Web Worker

javascript - 在 webpack 库中加载 Web Worker

问题描述

我正在尝试从自定义 npm 包中加载网络工作者。

[App] -> [my npm package -> load worker]

我worker-loader在 npm 包中使用来加载工作文件：

import Worker from 'worker-loader!./myPackage.worker';
const worker = new Worker();

我在本地 npm 包中的 webpack 配置：

{
 entry: './packages/myPackage/src/index.ts',
  output: {
    library: 'myPackage',
    libraryTarget: 'umd',
    path: path.resolve(__dirname, './packages/myPackage/dist'),
    filename: "index.js"
  },
  module: {
    rules: [
      { 
        test: /\.tsx?$/,
        loader: "ts-loader"
      },
      {
        test: /\.worker\.js$/,
        loader: 'worker-loader',
        options: {
          inline: "no-fallback"
      }
      },
    ]
  },        
}

不幸的是，每次我这样做时，我的应用程序都无法找到工作文件。该应用程序正在尝试从中获取工作人员，./static/js/myPackage.worker.js但未找到该文件并引发错误Uncaught SyntaxError: Unexpected token '<'。

我在这里做错了什么？理想情况下，我希望将工作文件与 npm 包捆绑在一起，这样就不需要加载其他文件。怎样才能实现这种行为？

标签： javascriptreact-nativenpmwebpackweb-worker

解决方案

我自己也遇到了这个问题，根据帖子的发布时间，我假设您使用的是 Webpack5。

首先，我会更改规则的顺序并仔细检查它们的规则是否匹配。其次，由于您正在使用react-native我会验证您可以使用工人。

不创建附加文件的最简单方法是使用工作人员的内联选项（也有 TS 指南）。请注意，对于不创建的文件，必须no-fallback将其用作inline选项的值。

如果这不是一个选项，我可能会研究模块联合和动态公共路径。如果这也不可行，那么我建议研究import.meta.resolve或编写一个插件，在 Webpack 依赖关系图中解析后可以替换代码中的路径。

该inline选项就像一个魅力，但如果这不是一个选项，希望这会有所帮助。

干杯，
机会

推荐阅读