Webpack worker-loader编译typescript worker失败

Question

我正在按照worker-loader文档中的描述配置我的项目，并且我能够使用正确的d.ts获得TS代码英特尔的工作。

然而，在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);

我的worker文件内容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

好了，我想通了。

首先，我需要将worker loader移到ts-loader之前，并且不需要在worker use属性中指定array，只需按照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'] },
    ]
  },

然后，在我的worker中，我还需要导出任何内容，否则typescript (2.8.3)会抱怨它找不到模块，我执行export default null as any以避免进一步混淆t。

worker.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;

index.js

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

Answer 2

感谢Dmitry，在让worker-loader构建我的Typescript项目方面，您帮助我走得更远。

尽管如此，为了让它正常工作，我还需要解决另外三个问题：

当我在ts-

• /-
• -loader之上添加worker-loader时，构建会挂起。我修复了这个问题，使导入路径对于从web worker模块导入/导出的类型更加具体。我尝试注释掉web worker条目文件的内容，然后一次一行地取消注释，看看哪些可以构建，哪些不可以构建。
• 我做错的第二件事是，我在我的webpack配置和import语句中都添加了worker-loader。我基本上在web worker模块上运行了两次worker-loader。多伊尔。因此，要么将worker-loader添加到您的webpack配置中，要么添加'worker-loader!‘添加到import/require语句中。我将worker-loader添加到我的webpack配置中，并像这样导入:当我尝试执行新的MyWorker()时，import MyWorker = require('./my-worker');
• I获得了一个typeerror MyWorker is not a constructor，并且不得不将MyWorker强制转换为any，以便Typescript类型检查器接受它：new (MyWorker as any)();

希望这对某些人有帮助。