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);

我的工作人员文件内容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 loader，并且不需要在worker use属性中指定数组，只需按照worker-loader文档中的描述保留它。

<div class="gx-container" ng-controller="MainController as vm">
    <!-- Page Sidebar -->
    <div id="menu" class="side-nav gx-sidebar" ng-show="isActive('/login')">
    </div>
</div>

然后在我的工作人员中我还需要输出任何东西，否则打字稿（2.8.3）会抱怨它找不到模块而我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'] }, ] },以避免混淆ts。

worker.js

export default null as any

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

Answer 2

谢谢德米特里（Dmitry），您帮助我在使worker-loader建立我的Typescript项目方面取得了长足的进步。

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

当我在ts-loader / awesome-typescript-loader上方添加worker-loader时，构建将挂起。我通过使导入路径对于从Web Worker模块导入/导出的类型更加特定来解决此问题。我通过尝试注释掉Web Worker条目文件的内容，然后每次取消注释一行来查看将要构建的内容，从而发现了这一点。
我做错的第二件事是我既在我的webpack配置中又在import语句中添加了worker-loader。我基本上是在Web Worker模块上两次运行worker-loader。 h因此，要么将worker-loader添加到您的webpack配置中，要么添加“ worker-loader！”。导入/需要语句。我将worker-loader添加到了我的webpack配置中，并以如下方式导入了它：import MyWorker = require('./my-worker');
当我尝试执行新的MyWorker（）时遇到typeerror MyWorker is not a constructor，并且不得不将MyWorker强制转换为任何类型，以便Typescript类型检查器将其吞下：new (MyWorker as any)();
< / li>

希望这对某人有帮助。

Answer 3

如果您将TypeScript与项目引用一起使用，请将plt.figure() for i in highlight_data: plt.axvspan(i[0], i[1]) plt.show()添加到 ts-loader webpack配置：

options: {projectReferences: true }

ts-loader自述文件here中的更多详细信息。

这不能直接回答发布的问题，但是此页面是ts-loader问题在Google中排名第一的页面。

Webpack worker-loader无法编译打字稿工作者

3 个答案: