TypeScript에서 만든 WebWorker를 npm 패키지에 묶는 방법

추기

이번에 기재된 내용은 웹 패키지 5로 운행해 보았지만 본래웹 팩 4에 사용되는 내용인 것 같다.
Note that this is specific to webpack 4. To use Web Workers in webpack 5, see https://webpack.js.org/guides/web-workers/ .
링크된 페이지를 보았는데 5페이지는worker-loader를 사용하지 않아도 이동할 수 있지만 내부화가 잘 안 된다고 적혀 있었다.
github를 보면asset/inline을 사용하면 됩니다., 그러나 최종적으로 js를 읽는 상태로 보이는 웹워크맨의 말."아니야, 그게 아니야."
이번에는 WebWorker의 호출자 코드에 WebWorker의 Typerscript 파일을 지정하고 WebWorker를 시작합니다.
asset/inline에서 지정한 ts를 컴파일한 후에 묶어주면 되는데 안 될 것 같아요.
그래서 어쨌든 이번 기재의 내용은 이미 안정되었다.
(webpack5를 사용하면worker loader는 deprecated이지만 지금은 어쩔 수 없습니다. 좋은 방법이 있으면 알려주세요.)

개시하다

지금까지WebWorkder로 각종 기계 학습 모형을 시작하는 npm 포장만들어졌지만,타입스크립트로만만든웹워커를단일한파일(위)에 묶는 방법도도잘 모르겠어요.따라서 npm install 이후 웹워커의 스크립트를 공공 폴더로 복사하는 설치 방법이 Readme에 기재되어 있습니다.
예를 들면, 아래의 느낌.

$ npx create-react-app demo  --template typescript
$ cd demo/
$ npm install
$ npm install @dannadori/bodypix-worker-js
$ cp node_modules/\@dannadori/bodypix-worker-js/dist/bodypix-worker-worker.js public/ # <- Here!! Too lame!!

촌스럽네요.
얼렁뚱땅 다시 조사하면 되니까 여기서 방법을 소개해 드리겠습니다.

전제 조건

이번에는 홈페이지 5 시스템을 전제로4 과는 안 해봤어요.

js 파일로 만든 파일을 묶을 때

우선 자바스크립트로 만든 웹워커를 묶는 방법입니다.

사전 설정

웹 패키지를 사용하여 WebWorker를 번들로 묶을 때 Worker loader를 사용하면 편리합니다.
다음 웹 패키지.config.js에 규칙을 추가합니다.WebWorker의javascript(파일 이름의 끝은worker.js의)를 대상으로worker-loader를 사용합니다.
이 때 inline을 선택하십시오: "no-fallback"을 붙여 주십시오.따라서 WebWorker의 javascript는 출력 파일에 묶여 있습니다.

$ npm install -D worker-loader

코드

우선 워크맨 코드입니다.이 기사를 읽은 사람들은 웹워커 제작 자체가 내 장기라고 생각해 설명을 생략했다.

        rules: [
            { test: /\.ts$/, loader: 'ts-loader' },
            {
                test: /worker\.js$/i,
                loader: "worker-loader",
                options: {
                    inline:"no-fallback"
                },
            },
        ],

npm 패키지의main 코드에서 웹워커의 파일을 가져오고 호출합니다.

onmessage = function (event) {
    setTimeout(() => {
        postMessage(`[WORKER_JS] Waited ${event.data}ms`);
    }, event.data)
};

이상.아주 간단합니다.

ts 파일을 만든 파일을 묶을 때

다음은 typescript로 만든 WebWorker를 번들로 묶는 방법입니다.

사전 설정

웹 패키지를 사용하여 WebWorker를 묶을 때 worker loader를 사용합니다. (js와 같은 경우입니다.)

import libJs from '../src-worker/worker.js'

export class WebWorkerLibJs{
    worker:Worker
    constructor(){
        this.worker = libJs()
        this.worker.onmessage = (mess) =>{
            console.log(`[WebWorkerLibJs] ${mess.data}`)
        }
    }

    sendMessage = () =>{
        this.worker.postMessage(2 * 1000);
    }
}

webpack.config.js에 추가 설정이 필요 없습니다.물론 TS를 컴파일하기 위해서는 ts-loader를 설정해야 합니다.

$ npm install -D worker-loader

코드

우선 금형 설정에서worker-loader를 사용하도록 설정합니다../typings/worker-loader.d.ts

        rules: [
            { test: /\.ts$/, loader: 'ts-loader' },
        ],

worker의 코드입니다.

declare module "worker-loader!*" {
    class WebpackWorker extends Worker {
        constructor();
    }
    export default WebpackWorker;
}

npm 패키지의main 코드에서 WebWorker 파일을 가져오고 new.
WebWorker 파일을 가져올 때 중요한 것은 ? 를 사용하여 inline 파라미터를 설정하는 것입니다.
이게 없으면 파일 한 개가 묶이지 않아요.

const ctx: Worker = self as any;

onmessage = async (event) => {
    setTimeout(() => {
        ctx.postMessage(`[WORKER_TS] Waited ${event.data}ms`);
    }, event.data)

}

이상.이것도 아주 간단하네요.

창고.

여기에 기재된 내용은 아래 창고에 보관한다.
https://github.com/w-okada/bundle-webworker
Readme에 따라 명령을 실행하십시오.
코드량도 적어 10분 정도 이동하면서 이해할 수 있다.

후기

참고로 이 내용은 정식 문서에도 일부 기재(JS 부분)가 있다.
그러나 TS 번들 방법은 기재되지 않았다.
따라서 자신의 npm 패키지에서 패키지를 사용하는 사용자가 js 파일을 복제하는 가져오는 방식을 사용했다.
서운하다조금씩 다시 하자...
공식.