TypeScript 및 webpack으로 웹 작업자를 만드는 방법

TypeScript 및 webpack으로 웹 작업자를 만드는 방법

웹 작업자를 사용하려고 할 때 내 서식을 제대로 편집하는 데 문제가 좀 있어.

나는 이렇게 정의한 노동자가 있다.

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

내 애플리케이션의 다른 부분에서는 웹 팩 작업자 로더를 사용하여 다음과 같이 작업자를 로드하고 있다.let Worker = require('worker!../../../workers/uploader/main');

하지만 나는 지원서를 송부해야 할 때 나에게 소리를 지르지 않는 서식을 만드는 데 약간의 문제가 있다.내 연구에 따르면 나는 노동자가 접근해야 하는 글로벌 변수를 노출시키기 위해 tsconfig 파일에 또 다른 표준 lib를 추가해야 한다.이것들을 이렇게 명시했다.

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

웹 팩을 실행하면 모든 것을 구축하게 되는데 다음과 같은 오류가 많이 발생한다.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'.

그래서 제 질문은:웹 작업자가 lib를 사용하도록 지정하는 방법webworker.d.ts 정의와 다른 모든 것은 정상적인 정의를 따른다?

배트레스크의 대답을 사용하여 나는 실제로 메시지를 앞뒤로 전달하고, 어느 정도 좋은 방식으로 작업할 수 있었다.

libs와 함께 그의 대답에 덧붙여, Typecript 코드는 또한 작동하기 위해 약간의 누드가 필요하다.

먼저 파일을 만들어 가져올 때 파일 로더가 사용자와 협력하도록 하십시오.나는 이름이 있는 파일을 가지고 있다.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.js웹 팩을 어떻게 구성할 수 있는지 보여주기 위해.

당신 안에tsconfig.json줄을 지어 들어오다compilerOptions설정:

{
    "compilerOptions": {
        "target": "es5",
        //this config for target "es5"
        "lib": ["webworker", "es5", "scripthost"]
        //uncomment this for target "es6"
        //"lib": ["webworker", "es6", "scripthost"]
    }
}

웹 작업자는 DOM에 액세스할 수 없고window,document그리고parent개체(여기서 지원되는 전체 개체 목록:웹 작업자가 사용할 수 있는 기능 및 클래스);domTypeScript의 lib가 호환되지 않으며 에서 정의되는 일부 요소를 재정의함lib.webworker.d.ts

라스무스-한센의 솔루션은 기본 형태로는 근로자들이 직접 모듈을 수입하는 것을 허용하지 않는다.몇 번 더 찾아본 후에, 나는 https://github.com/Qwaz/webworker-with-typescript의 예가 그렇게 한다는 것을 알게 되었다.다음에서 버전을 테스트했다.worker-loader, 그리고 양쪽이 가져올 수 있는 것보다 간단한 모듈을 사소한 것으로 추가할 수 있었다.worker.ts그리고entry.ts.

다음으로 마이그레이션한 이후file-loader": "5.0.2"

문제가 생겼어: 작업자 파일이 검색 중이었어.

Uncaught SyntaxError: Unexpected token '<'그리고 그 URL은/[object%20Module].

해하하면 를 workerPath를에서 대체한다.main.ts에 의해

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

참조URL: https://stackoverflow.com/questions/38715001/how-to-make-web-workers-with-typescript-and-webpack