Использование webpack worker-loader с причинами машинописи не может найти ошибку модуля

Question

Я уже давно использую веб-загрузчик we bpack. И теперь мы переходим на Angular 7 и начинаем использовать машинопись.

После того, как вы прочитали много путеводителей и пособий и этот удивительный пост: https://github.com/we bpack-contrib/worker-loader/issues/94

Я продолжаю получать ошибки и не заставляю работника-загрузчика работать с машинописью.

ОШИБКА в [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'
                    }
                }
            ]
        }
    ]
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es6", "dom" ],
        "noImplicitAny": false,
        "suppressImplicitAnyIndexErrors": true,
        "declaration": false,
        "skipLibCheck": true,
        "types": [
            "node"
        ],
        "typeRoots": [
            "node_modules/@types",
            "typings"
        ]
    },
    "files": []
}

типизации / custom.d.ts

declare module 'worker-loader!*' {
    class WebpackWorker extends Worker {
        constructor();
    }

    export = WebpackWorker;
}

работник / import.worker.ts

import { MyWorker, MESSAGE_TYPE } from './types';

const ctx: MyWorker= self as any;

ctx.onmessage = event => {
    const msg = event.data;
    console.log(event);
};

ctx.postMessage({ type: MESSAGE_TYPE.READY });

export default null as any;

работник / index.ts

import { MyWorker} from './types';
import MyWorkerImport = require('./import.worker');

export { MESSAGE_TYPE } from './types';
export default MyWorkerImport as typeof MyWorker;

работник / types.d.ts

// MyWorker/types.d.ts

// Enumerate message types
export const enum MESSAGE_TYPE {
    READY = 'ready',
    REQUEST = 'request',
    RESULT = 'result',
    ERROR = 'error'
}

// Define expected properties for each message type
interface IReadyMessage {
    type: MESSAGE_TYPE.READY;
}

interface IRequestMessage {
    type: MESSAGE_TYPE.REQUEST;
    paramA: string;
    paramB: number;
}

interface IResultMessage {
    type: MESSAGE_TYPE.RESULT;
    data: Float32Array;
}

interface IErrorMessage {
    type: MESSAGE_TYPE.ERROR;
    error: string;
}

// Create a union type of all messages for convenience
type MyWorkerMessage = IReadyMessage | IRequestMessage | IResultMessage | IErrorMessage;

// Extend MessageEvent to use our messages
interface IMyMessageEvent extends MessageEvent {
    data: MyWorkerMessage;
}

// Extend Worker to use our custom MessageEvent
export class MyWorkerWorker extends Worker {
    public onmessage: (this: MyWorker, ev: IMyMessageEvent) => any;

    public postMessage(this:  MyWorker, msg: MyWorkerMessage, transferList?: ArrayBuffer[]): any;
    public addEventListener(type: 'message', listener: (this: MyWorker, ev: IMyMessageEvent) => any, useCapture?: boolean): void;
    public addEventListener(type: 'error', listener: (this: MyWorker, ev: ErrorEvent) => any, useCapture?: boolean): void;
}

import.component.ts

import {Component, OnInit} from '@angular/core';
import MyWorker from "./worker"

@Component({
    templateUrl: './import.a2.html',
    styleUrls: ['./import.a2.scss']
})
export class ImportComponent implements OnInit {

    workers: MyWorker[] = [];

    constructor() {}

    ngOnInit(): void {}

    processFile() {
        const worker = new MyWorker('');
    }

}

И я продолжаю получать следующее сообщение:

ОШИБКА в [at-loader] ....../import/worker/index.ts:4:58 TS2306: Файл '...... / import / worker / import.worker.ts' не является модулем,

ОШИБКА в [at-loader] ......./import/import.component.ts:13:11 TS2304: Не удается найти имя 'MyWorkerImport'.

если я изменю строку на

import MyWorker = require('worker-loader!./import.worker');

Ошибка меняется на:

ОШИБКА в [at-loader] ....../import/worker/index.ts:4:58 TS2307: Не удалось найти модуль 'worker-loader!./import.worker'.

ОШИБКА в [at-loader] ....../import/import.component.ts:13:11 TS2304: Не удается найти имя 'MyWorkerImport'.

Answer 1

Хорошо, все это просто и понятно. Мой файл пользовательских текстов не был включен, и веб-пакет не получил это.

Я изменил custom.d.ts в папку с именем custom и файл с именем index.d.ts в результате чего typings/custom/index.d.ts

Я изменил tsconfig.json, чтобы включить относительную типизацию и добавить пользовательскую (так как она была исправлена ​​на узле).

больше информации о наборе здесь: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html (поиск @typeRoots)

Новый цконфиг, а не разница в types а также typeRoots

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "webworker", "es6", "dom" ],
        "noImplicitAny": false,
        "suppressImplicitAnyIndexErrors": true,
        "declaration": false,
        "skipLibCheck": true,
        "types": [
            "node",
            "custom"
        ],
        "typeRoots": [
            "node_modules/@types",
            "./typings"
        ]
    },
    "files": []
}

Рядом с этим вы должны загрузить файл как

import MyWorker = require('worker-loader!./worker/import.worker');

и вы можете удалить весь раздел конфигурации веб-пакета

Answer 2

Я внес предложенные изменения, и это не сработало для меня. Для тех, кто не использует Vue, я предлагаю попробовать обновить Webpack. для тех, кто использует Vue, у меня были те же проблемы, и мне удалось это исправить, обновив vue-cli до5.0.6и используяvue upgradeкоманда. Эта команда также обновит Webpack

Перенос Vue CLI из ссылки v4