☰

TypeScriptとwebpackでWebワーカーを作成する方法 質問する

tag-icon • tag-icon typescript webpack web-worker
TypeScriptとwebpackでWebワーカーを作成する方法 質問する

Webpack で Web ワーカーを使用しようとすると、TypeScript を適切にコンパイルできないという問題が発生します。

次のように定義されたワーカーがあります:

onmessage = (event:MessageEvent) => {
  var files:FileList = event.data;
    for (var i = 0; i < files.length; i++) {
        postMessage(files[i]);
    }
};

アプリケーションの別の部分では、次のように webpack ワーカー ローダーを使用してワーカーをロードしています。let Worker = require('worker!../../../workers/uploader/main');

しかし、アプリケーションをトランスパイルする必要があるときに TypeScript 宣言が警告されないようにするのに問題があります。調査によると、ワーカーがアクセスする必要があるグローバル変数を公開するには、tsconfig ファイルに別の標準ライブラリを追加する必要があります。これらは次のように指定しました。

{
     "compilerOptions": {
          "lib": [
               "webworker",
               "es6",
               "dom"
          ]
     }
}

さて、すべてをビルドするために webpack を実行すると、次のようなエラーが大量に発生します。 C:/Users/hanse/Documents/Frontend/node_modules/typescript/lib/lib.webworker.d.ts:1195:13 Subsequent variable declarations must have the same type. Variable 'navigator' must be of type 'Navigator', but here has type 'WorkerNavigator'.

私の質問は、Webworker が lib.webworker.d.ts 定義を使用し、その他すべてが通常の定義に従うように指定するにはどうすればいいかということです。

ベストアンサー1

batressc の回答を使用して、実際にメッセージをやり取りする機能を、ある程度うまく機能させることに成功しました。

ライブラリに関する彼の回答に加えて、Typescript コードも動作させるにはいくつかの調整が必要です。

まず、インポート時にファイルローダーが連携できるようにファイルを作成します。file-loader.d.ts次の内容のファイルがあります。

declare module "file-loader?name=[name].js!*" {
    const value: string;
    export = value;
}

次に、main.tsファイルローダーを使用してワーカーをインポートします。

import * as workerPath from "file-loader?name=[name].js!./test.worker";

これをworkerPath使用して実際のワーカーを作成できます。

const worker = new Worker(workerPath);

test.worker.ts次に、次の内容の実際のワーカー ファイルを作成します。

addEventListener('message', (message) => {
    console.log('in webworker', message);
    postMessage('this is the response ' + message.data);
});

その後、ファイル内でメッセージを送受信できますmain.ts。

worker.addEventListener('message', message => {
    console.log(message);
});
worker.postMessage('this is a test message to the worker');

すべてを動作させるために完全な視点が必要な人のために、すべてを github リポジトリに集めました:https://github.com/zlepper/typescript-webworker

このリポジトリには、webpack.config.jswebpack をこれに合わせて構成する方法を示すものも含まれています。

おすすめ記事