将webpack工作加载程序与typescript一起使用会导致找不到模块错误

Question

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

在关注了许多指南和图图里亚斯以及这篇令人惊叹的文章之后：https://github.com/webpack-contrib/worker-loader/issues/94#issuecomment-336596520

我不断地收到错误，并且没有让worker加载器使用typescript。

在[加载程序]中出现错误/导入/工作者/索引.ts:4:58TS2306:文件/import/worker/import.worker.ts不是模块。

[加载程序]中的错误/import/import.component.ts:13:11TS2304:找不到名称"MyWorkerImport"。

我当前的设置如下：

webpack-config:

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

打字员/客户

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

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

worker/index.ts

import { MyWorker} from './types';
import MyWorkerImport = require('./import.worker');
export { MESSAGE_TYPE } from './types';
export default MyWorkerImport as typeof MyWorker;

工人/类型.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('');
}
}

我不断收到以下信息：

在[加载程序]中出现错误/导入/工作者/索引.ts:4:58TS2306:文件/import/worker/import.worker.ts不是模块。

[加载程序]中的错误/import/import.component.ts:13:11TS2304:找不到名称"MyWorkerImport"。

如果我将行更改为

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

错误变为：

在[加载程序]中出现错误……/导入/工人/索引.ts:4:58TS2307:找不到模块"worker loader！"/import.worker'

[加载程序]中的错误……/import/import.component.ts:13:11TS2304:找不到名称"MyWorkerImport"。

Answer 1

好吧，一切都很简单。我的自定义打字员文件没有包括在内，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的区别(：

{
"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');

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

Answer 2

我做了建议的更改，但对我来说不起作用。对于那些不使用Vue的用户，我建议尝试更新Webpack。对于那些使用Vue的用户，我也遇到了同样的问题，我通过将Vue-cli更新为5.0.6并使用vue upgrade命令来修复它。此命令还将更新Webpack

从v4链接迁移Vue CLI