TypeScript+Parcel
WebWorkerでModule(ES6)を

投稿日:

WebWorkerと通常のJavaScriptで処理を共有しようした所、WebWorkerはES6のモジュールに対応していませんでした。ES6を使わない、共有を諦めてWorker専用処理にする、などいろいろ考えたのですがモージュールバンドラーを導入することにしました。有名なのはWebpackですが設定が面倒なので、設定不要を売りにしているParcelというバンドラーを採用することに。公式ページを見ながらインストール、実行まで5分ほどで完了、設定不要で簡単でした。ただ、 Parcelの開発用サーバーの挙動がなんか怪しいので、サーバーはこれまで通りVSCodeのLive Serverを利用しています。

Parcel

https://parceljs.org

設定不要のWebアプリケーションバンドラーです。バンドル関係は使用したことがないため、詳しい機能、他のツールとの違いなどはわかりません。とりあえず、簡単に使えて、ES6のimport文を展開してくれるツールを探しているときに見つけました。TypeScriptやRust(wasm)にも対応しています。

インストール&使い方

https://parceljs.org/getting_started.htmlを見てください。簡単です。

TypeScript

tsファイルがあると自動的にTypeScriptをインストールして、コンパイルしてくれます。

WebWorker対応

tsソースコードにnew Worker(“worker.ts”)と書かれていると、 worker.ts をWebWorker用にコンパイルしてくれます。WebWorkerはES6モジュール未対応ですが、parcelが実行可能なコードにimportを変換してくれるので、通常のJavaScriptを同じようにモジュール定義ができます。今回一番欲しかったこの機能が設定なしで簡単に使えたことがparcelを選んだ理由です。

TypeScriptの型チェック無視

parcelでTypeScriptを使うときの一番のデメリットだと思います(場合によってはメリットかも)。ですが、VSCodeのTypeScript型チェックが優秀なので、今のところ特に問題になっていないません。なのでこのまま使い続けるつもりです。

WebWorkerでpostMessage関数などを使うときlibに”webworker”を指定する必要があり”dom”と混在できないという制限がありました。
本当はダメなような気がしますが、parcelでは

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

と書いてもエラーにならない、というか無視するのでtsconfigが1つで済みます。VSCodeでもpostMessageなどの引数の型チェックが緩くなるみたいです。domとwebworkerのどちらの引数でも許してしまうので自分で管理する必要があります。

ブラウザの制限

WebAssemblyやasync命令などに対応したブラウザに限定したい場合package.jsonの “browserslist”で指定できます。ここで初めて設定作業登場。最新のChromeとFirefoxに限定するなら

package.json{
  "browserslist" : [
    "last 1 Chrome version",
    "last 1 Firefox version"
  ]
}

サンプルプログラム

ParcelでTypeScriptとWebWorkerを使用したプロジェクトです。WebWorkerのpostMessageは自分を作成した親、自分が作成した子Workerとしか通信できないので、別のWorkerと通信するためのclassを作成しました。それを検証するためのプログラムです。classのソースコードを共有するためにParcelを導入しました。ファイル読み込み、ゲーム、WebGLの3つのWorker間で通信を行います。JSONファイルに記述された色で画面クリアするだけのプログラムです。

“TypeScript+Parcel
WebWorkerでModule(ES6)を” をダウンロード parcel_ww.zip – 5 回のダウンロード – 12 KB

FireFox開発ツールでのWebWokerデバッグの不具合?

FireFox(70.0.1)のデバッガー起動してWebWokerのソースコードなどを表示しているとデバッガーの画面が真っ白になり使えなくなります。最初、Parcelや自分のプログラムを疑ったのですが、Workerを作成してコンソール出力するだけのプログラムでも発生したため、ブラウザかPCに問題があるようです。原因や解決方法は不明です。 Edgeもなんか怪しい 、Chromeでは発生しません。

コメントを残す

メールアドレスが公開されることはありません。

認証:数字を入力してください(必須) * Time limit is exhausted. Please reload CAPTCHA.