web-dev-qa-db-ja.com

Web Workers-モジュールをインポートする方法

ES2015インポート/エクスポートモジュールを使用しています。

ワーカーファイルで、通常のように関数をインポートしようとすると：

worker.js

import { a, b, c } from "./abc.js";

エラーが表示されます：SyntaxError: import declarations may only appear at top level of a module

私のモジュール 'abc.js'で関数をエクスポートしているので、古い（＆外見上は明らかに）構文を使用してそれらを使用する方法がわかりません。

self.importScripts( "/app/abc.js" );

だから、私の質問は、ワーカーで新しいインポートモジュール構文をどのように使用するのですか？

2番目の質問は、エクスポートされるグローバルオブジェクトの親が存在しないモジュールからimportScriptsをインポートする場合、何をインポートするのかということです。

javascriptimportmoduleecmascript-6web-worker
23
Kayote

ワーカーのES2015モジュールは、どのブラウザーでもまだサポートされていません（そうでなければモジュールをサポートするものでさえも）。それらができたら、次のようなワーカーを作成する必要があります。

_new Worker("worker.js", { type: "module" });
_

参照： https://html.spec.whatwg.org/#module-worker-example

今のところ importScripts() を使用する必要があります。

これらは各ブラウザのバグレポートです：

21
Tobias Buschor

労働者におけるESモジュールは、Chromeを起動するときに適切なフラグを使用して、実験のWebプラットフォーム機能できるように、すでにChromeで利用できます。

chrome.exe --enable-experimental-web-platform-features

これは、あなたがモジュールとしてワーカースクリプトをロードするために使用する必要がある構文は次のとおりです。

new Worker( 'my-worker.js', { type : 'module' } );

この機能は、ほぼayearのために開発されており、すぐに利用できるようにする必要があり、特別なフラグを必要とせず、しかし、公式リリース日はまだありません。

1
colxi

self.への割り当てはうまくいきました。別のjsファイルにインポートしました：abcImported.js

import { a, b, c } from "./abc.js";

export {  a, b, c };

そしてサービスワーカーで：

self.a = require('abcImported.js').a;
self.b = require('abcImported.js').b;

このようにして、ワーカー内でアクセスできます。 （クロムでテスト済み）

0
Kate Kasinskaya