关于angular：将Webpack worker-loader与Typescript一起使用会导致找不到模块错误

Using webpack worker-loader with typescript causes cannot find module error

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

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

我不断收到错误，并且没有使worker-loader与Typescript一起工作。

ERROR in [at-loader] ....../import/worker/index.ts:4:58
TS2306: File '....../import/worker/import.worker.ts' is not a module.

ERROR in [at-loader] ......./import/import.component.ts:13:11
TS2304: Cannot find name 'MyWorkerImport'.

我当前的设置如下：

webpack配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
"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

1
2
3
4
5
6
7

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

export = WebpackWorker;
}

worker / import.worker.ts

1
2
3
4
5
6
7
8
9
10
11
12

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;

worker / index.ts

1
2
3
4
5

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

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

worker / types.d.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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('');
}

}

而且我不断收到以下消息：

ERROR in [at-loader] ....../import/worker/index.ts:4:58
TS2306: File '....../import/worker/import.worker.ts' is not a module.

ERROR in [at-loader] ......./import/import.component.ts:13:11
TS2304: Cannot find name 'MyWorkerImport'.

如果我将线更改为

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

错误更改为：

ERROR in [at-loader]
....../import/worker/index.ts:4:58
TS2307: Cannot find module 'worker-loader!./import.worker'.

ERROR in [at-loader]
....../import/import.component.ts:13:11
TS2304: Cannot find name 'MyWorkerImport'.

好吧，一切都是简单明了的。我的自定义类型文件不包括在内，而webpack没有得到。

我将custom.d.ts更改为名为custom的文件夹和名为index.d.ts的文件，结果为typings/custom/index.d.ts

我将tsconfig.json更改为包括相对类型并添加自定义(因为它已固定在节点上)。

有关键入的更多信息，请访问：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html(搜索@typeRoots)

新的tsconfig，不是types和typeRoots的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
"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": []
}

接下来，您必须将文件加载为

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

您可以删除整个webpack配置部分