web-dev-qa-db-fra.com

Web Workers - Comment importer des modules

J'utilise les modules d'importation/exportation ES2015.

Dans mon fichier de travail, lorsque j'essaie d'importer des fonctions comme d'habitude:

worker.js 

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

J'ai l'erreur: SyntaxError: import declarations may only appear at top level of a module

Comme j'exporte des fonctions dans mon module 'abc.js', je ne sais pas comment les utiliser en utilisant l'ancienne syntaxe (& apparemment en voie de disparition):

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

Ma question est donc la suivante: comment utiliser la nouvelle syntaxe de module d'importation avec les travailleurs?

La deuxième question est la suivante: dans quoi importScripts importe-t-il quand il importe depuis un module où aucun objet-objet global n’est exporté?

javascriptimportmoduleecmascript-6web-worker
17
Kayote

Les modules ES2015 des opérateurs ne sont encore pris en charge par aucun navigateur (pas même ceux prenant en charge des modules autrement). Une fois cela fait, vous devez créer un ouvrier comme ceci:

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

Voir: https://html.spec.whatwg.org/#module-worker-example

Pour le moment, vous devez utiliser importScripts() .

Voici les rapports de bugs pour chaque navigateur:

17
Tobias Buschor

Les modules ES dans les postes de travail sont déjà disponibles dans Chrome. Ils permettent d'activer les fonctionnalités de la plateforme Web expérimentale et d'utiliser l'indicateur approprié lors du lancement de chrome:

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

Voici la syntaxe que vous devez utiliser pour charger le script de travail en tant que module:

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

Cette fonctionnalité est en développement depuis presque un an et devrait être disponible sous peu, sans nécessiter de drapeaux spéciaux. Toutefois, il n’existe pas encore de date de sortie officielle.

1
colxi

pour moi, assigner à self. a bien fonctionné. J'ai importé dans un autre fichier js: abcImported.js

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

export {  a, b, c };

et dans le travailleur de service: 

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

de cette façon, il est accessible à l'intérieur du travailleur. (testé en chrome)

0
Kate Kasinskaya