Webpack worker-loader 无法编译打字稿 worker

Question

我正在按照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：

const ctx: Worker = self as any;
ctx.addEventListener('message', event => {
console.log(event);
setTimeout(() => ctx.postMessage({
foo: 'boo'
}), 5000);
});

申请录入index.ts

import TestWorker from './test.worker.ts';
const test = new TestWorker();
test.postMessage({});

最后是我的webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const DIR_SOURCE = path.resolve(__dirname, 'src');
const DIR_BUILD = path.resolve(__dirname, 'build');
module.exports = {
entry: `${DIR_SOURCE}/index.tsx`,
output: {
path: DIR_BUILD,
filename: 'project.bundle.js'
},
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
{test: /.tsx?$/, loader: "ts-loader" },
{test: /.worker.ts$/, use: ['ts-loader', 'worker-loader'] },
{test: [/.vert$/, /.frag$/], use: 'raw-loader'},
{test: /.(png|jpg|gif|svg)$/, use: {loader: 'file-loader', options: {}} },
{test: /.*.sass/, use: ['style-loader', 'css-loader', 'sass-loader'] },
]
},
plugins: [
new webpack.DefinePlugin({
'CANVAS_RENDERER': JSON.stringify(true),
'WEBGL_RENDERER': JSON.stringify(true)
}),
new HtmlWebpackPlugin({
template: 'src/index.ejs'
}),
]
};

任何帮助都非常感谢。

谢谢:)

Answer 1

好的，我想通了。

首先，我需要在 ts-loader 之前移动工作加载器，并且不需要在 worker use 属性中指定数组，只需按照 worker loader 文档中的说明保留它。

module: {
rules: [
{test: /.worker.ts$/, loader: 'worker-loader'},
{test: /.tsx?$/, loader: "ts-loader" },
{test: [/.vert$/, /.frag$/], use: 'raw-loader'},
{test: /.(png|jpg|gif|svg)$/, use: {loader: 'file-loader', options: {}} },
{test: /.*.sass/, use: ['style-loader', 'css-loader', 'sass-loader'] },
]
},

然后在我的工人中，我还需要导出任何内容，否则打字稿 (2.8.3) 会抱怨它找不到模块，我export default null as any避免进一步混淆 ts。

工人.js

const ctx: Worker = self as any;
ctx.addEventListener('message', event => {
console.log(event);
setTimeout(() => ctx.postMessage({
foo: 'boo'
}), 5000);
});
export default null as any;

索引.js

import TestWorker from './test.worker.ts';
const test = new TestWorker('');
test.postMessage({});

Answer 2

谢谢德米特里，你帮助我在让 worker-loader 构建我的 Typescript 项目方面走得更远。

即便如此，我还需要解决三个问题才能使其正常工作：

• 当我在 ts-loader/awesome-typescript-loader 上方添加 worker-loader 时，构建会挂起。我通过使导入路径对于从 Web worker 模块导入/导出的类型更加具体来解决此问题。我通过尝试注释掉 Web worker 条目文件的内容，然后一次取消注释一行来发现，以查看哪些会构建，哪些不会构建。

• 我做错的第二件事是我通常在我的 webpack 配置和导入语句中添加了 worker-loader。我基本上在 web worker 模块上运行了两次 worker-loader。嘟嘟。因此，要么将 worker-loader 添加到你的 webpack 配置中，要么在 import/require 语句中添加 'worker-loader！'。我将worker-loader添加到我的webpack配置中，并且像这样导入：import MyWorker = require('./my-worker');

• 当我尝试做新的MyWorker()时，我得到了一个typeerror MyWorker is not a constructor，并且不得不将MyWorker强制转换为任何类型检查器才能吞下它：new (MyWorker as any)();

希望这对某人有所帮助。