标签: worker-loader

我正在尝试使用 webpack 的 worker loader 将 web worker 脚本加载到我的 React 应用程序中。但是，我收到一个未找到模块的错误。

未找到 ./src/index.js 模块中的错误：错误：无法解析 'C:\Users\wyrm\Documents\Project\src' 中的 './file.worker'

这是我的 src/index.js，它是 webpack 的入口点

import React from "react";
import ReactDOM from "react-dom";
import Worker from "./file.worker";

const worker = new Worker();
worker.postMessage({ message: "Hello there" });

const Index = () => <div>Hello there General Kenobi!</div>;

ReactDOM.render(<Index />, document.getElementById("index"));

我在 Project/public 文件夹中有名为 file.worker.js 的网络工作者脚本

/* eslint-env worker */

onmessage = e => {
  const message = e.data;
  console.log(`[From Main]: ${message}`);
};

这是我的 webpack 配置文件： …

我的Vue应用程序中有以下服务工作者代码:

main.js

if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/service-worker.js').catch(function() {
    console.log('Service worker registration failed.');
  });
}

服务worker.js

let currCacheName = 'premium-poker-tools-5';

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(currCacheName).then(function(cache) {
      let promise = cache.addAll([
        '/',
        'app.js',
        'c7d016677eb7e912bc40.worker.js',
        'f328c7e2b379df12fa4c.worker.js',
        'static/logo.png',
        'static/favicon.png',
        'static/loading.svg',
        'static/cards/ace-of-clubs.png',
        'static/cards/king-of-clubs.png',
        'static/cards/queen-of-clubs.png',
        'static/cards/jack-of-clubs.png',
        'static/cards/ten-of-clubs.png',
        'static/cards/nine-of-clubs.png',
        'static/cards/eight-of-clubs.png',
        'static/cards/seven-of-clubs.png',
        'static/cards/six-of-clubs.png',
        'static/cards/five-of-clubs.png',
        'static/cards/four-of-clubs.png',
        'static/cards/three-of-clubs.png',
        'static/cards/two-of-clubs.png',
        'static/cards/ace-of-spades.png',
        'static/cards/king-of-spades.png',
        'static/cards/queen-of-spades.png',
        'static/cards/jack-of-spades.png',
        'static/cards/ten-of-spades.png',
        'static/cards/nine-of-spades.png',
        'static/cards/eight-of-spades.png',
        'static/cards/seven-of-spades.png',
        'static/cards/six-of-spades.png',
        'static/cards/five-of-spades.png',
        'static/cards/four-of-spades.png',
        'static/cards/three-of-spades.png',
        'static/cards/two-of-spades.png',
        'static/cards/ace-of-hearts.png',
        'static/cards/king-of-hearts.png',
        'static/cards/queen-of-hearts.png',
        'static/cards/jack-of-hearts.png',
        'static/cards/ten-of-hearts.png',
        'static/cards/nine-of-hearts.png',
        'static/cards/eight-of-hearts.png',
        'static/cards/seven-of-hearts.png',
        'static/cards/six-of-hearts.png',
        'static/cards/five-of-hearts.png',
        'static/cards/four-of-hearts.png',
        'static/cards/three-of-hearts.png',
        'static/cards/two-of-hearts.png',
        'static/cards/ace-of-diamonds.png',
        'static/cards/king-of-diamonds.png',
        'static/cards/queen-of-diamonds.png',
        'static/cards/jack-of-diamonds.png',
        'static/cards/ten-of-diamonds.png',
        'static/cards/nine-of-diamonds.png', …

嗨，我正在本教程中尝试在 React 中使用 mapbox-gl 。我收到此错误： 意外的“！” 在 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker' 中 导入“worker-loader！mapbox-gl/dist/mapbox-gl-csp-worker”

这是我的重要代码：

地图.js

import React from 'react'
import mapboxgl from 'mapbox-gl/dist/mapbox-gl-csp';
import MapboxWorker from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker';

mapboxgl.workerClass = MapboxWorker;
mapboxgl.accessToken = " the token ";

export default class Map extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            lng: -70.9,
            lat: 42.35,
            zoom: 9
        };
        this.mapContainer = React.createRef();
    }
    componentDidMount() {
        const { lng, lat, zoom } = this.state;
        const map = new mapboxgl.Map({
            container: this.mapContainer.current,
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [lng, …

我已经使用 webpack webworker 加载器有一段时间了。我们现在正在迁移到 Angular 7 并开始使用 typescript。

在遵循许多指南和教程以及这个惊人的问题帖子之后：https : //github.com/webpack-contrib/worker-loader/issues/94#issuecomment-336596520

我不断收到错误，并且没有让工作加载器使用打字稿。

[at-loader] 中的错误....../import/worker/index.ts:4:58 TS2306: 文件“....../import/worker/import.worker.ts”不是模块.

[at-loader] 中的错误......./import/import.component.ts:13:11 TS2304：找不到名称“MyWorkerImport”。

我目前的设置如下：

网络包配置：

module: {
    rules: [
        {
            test: /\.worker\.ts$/,
            use: [
                {
                    loader: 'worker-loader',
                    options: {
                        name: '[name].[hash].js',
                        publicPath: '/'
                    }
                },
                {
                    loader: 'awesome-typescript-loader',
                    options: {
                        configFileName: rootPath + '/tsconfig.json'
                    }
                }
            ]
        }
    ]
}

配置文件

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es6", "dom" ],
        "noImplicitAny": false, …

我按照worker-loader文档中的说明配置项目，并且能够使用正确的d.ts使TS代码intel正常工作。

但是，在webpack构建过程中会引发错误，我不明白为什么。

 ERROR in ./src/test.worker.ts
Module parse failed: Unexpected token (1:9)
You may need an appropriate loader to handle this file type.
| const ctx: Worker = self as any;
| ctx.addEventListener('message', event => {
|   console.log(event);

我的工作人员文件内容test.worker.ts：

 ERROR in ./src/test.worker.ts
Module parse failed: Unexpected token (1:9)
You may need an appropriate loader to handle this file type.
| const ctx: Worker = self as any;
| ctx.addEventListener('message', event => {
|   console.log(event);

申请表 index.ts

const …

我需要使用多个工作人员创建一个 CRA(create-react-app) 应用程序。例如（我的工作人员包括导入模块）：

// worker.js
import x from 'file-xxx.js'
addEventListener('message', e => {
   // ...
})

// App.jsx

App(){
   const mWorker = new Worker('./worker') 
   mWorker.postMessage('data...')

   // ...

}

我想如果有人帮助我构建一个具有上述要求的简单 create react 应用程序。

目前我看到：

-- https://webpack.js.org/loaders/worker-loader/

-- https://github.com/GoogleChromeLabs/comlink

-- https://github.com/GoogleChromeLabs/worker-plugin

我使用Vue 2和Common.js来生成一个 AMD Bundle。我需要能够在运行时自动注册我的服务工作者。有用的东西：

https://www.npmjs.com/package/worker-plugin

https://www.npmjs.com/package/worker-loader

我需要 service worker 的原因是为了发送通知。但是，我对此遇到了麻烦，因为似乎唯一支持的工作人员是在 DedicatedWorkerGlobalScope 或 SharedWorkers 中。但是，为了发送“showNotification”，我需要Service Worker 类型。

所以基本上我做什么：

import Worker from "worker-loader!./Worker.js"

const worker = new Worker()

像魅力一样工作，就像这个（Worker Plugin）：

const worker = new Worker('./worker.js', { type: 'module' });

然而，总是正常的工人。那些不是服务人员，我几个小时以来一直在试图解决这个问题。是否缺少更改类型的配置？一些见解会很棒。

为了说明我试图实现的目标：

Service Worker 的注册需要在运行时自动发生，而我不必引用绝对或相对 url。

关于我如何实现我想要完成的目标的任何见解？

我尝试使用网络工作者创建打字稿库。当我使用 webpack-dev-server 测试我的代码时，一切看起来都不错，所有文件都找到了，但是当我让 npm run build 并尝试在另一个本地项目（npm install /local/path）中使用 lib 时，我GET http://localhost:8080/X.worker.js 在浏览器控制台中看到。

webpack.config.js：

const path = require('path');

module.exports = {
    devtool: 'inline-source-map',
    entry: {
        'mylib': './src/index.ts',
        'mylib.min': './src/index.ts',
    },
    output: {
        path: path.resolve(__dirname, '_bundles'),
        filename: '[name].js',
        libraryTarget: 'umd',
        library: 'mylib',
        umdNamedDefine: true
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    optimization: {
        minimize: true
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader',
                exclude: /node_modules/,
                query: {
                    declaration: false,
                }
            },
            {
                test: /\.worker\.js$/,
                use: {
                    loader: …