web-dev-qa-db-fra.com

Les importations de modules ES6 sont-elles hissées?

Je sais que dans la nouvelle syntaxe du module ES6, le moteur JavaScript n'aura pas à évaluer le code pour connaître toutes les importations/exportations, il ne fera que analyser it et " savoir "quoi charger.

Cela ressemble à du levage. Les modules ES6 sont-ils hissés? Et si oui, seront-ils tous chargés avant d'exécuter le code?

Ce code est-il possible?

import myFunc1 from 'externalModule1';

myFunc2();

if (Math.random()>0.5) {
    import myFunc2 from 'externalModule2';
}
javascriptecmascript-6hoistinges6-modules
37
gilamran

Après avoir fait plus de recherches, j'ai trouvé:

  • Les importations SONT hissées! selon la spec de ModuleDeclarationInstantiation
  • TOUS les modules dépendants seront chargés avant d'exécuter un code.

Ce code ne comportera aucune erreur et fonctionnera:

localFunc();

import {myFunc1} from 'mymodule';

function localFunc() { // localFunc is hoisted
    myFunc1();
}
24
gilamran

Ce sera une SyntaxError . Selon cette partie de la spécification :

Module :
   ModuleBody

ModuleBody :
    ModuleItemList

ModuleItemList :
    ModuleItem
    ModuleItemList ModuleItem

ModuleItem :
    ImportDeclaration
    ExportDeclaration
    StatementListItem

Cela signifie que le module ne peut contenir que des ImportDeclaration, ExportDeclaration ou StatementListItem. Selon thisStatementListItem ne pouvait pas contenir ImportDeclaration ni ExportDeclaration.

import myFunc1 from 'externalModule1';

est une déclaration d'importation, alors que:

if (Math.random()>0.5) {
    import myFunc2 from 'externalModule2';
}

est une déclaration. Votre code entraînera donc une erreur de syntaxe.

Qu'en est-il de "seront-ils tous chargés avant d'exécuter le code?". Cette partie de la spécification contient la phrase suivante:

REMARQUE: Avant d'instancier un module, tous les modules demandés doivent être disponibles.

Donc voilà. Ils seront tous chargés avant d'exécuter le code .

25
alexpods

La spécification ES6 est sujette à changement mais ce projet est explicite:

La résolution des variables statiques et la réussite de la liaison vérifient les conflits dans les noms de variables importés. S'il y a un conflit entre deux noms importés ou un nom importé et une autre liaison locale, il s'agit d'une erreur au moment de la compilation.

Et essayer d'importer au moment de l'exécution est une idée douteuse, non seulement dans ES6. Également tiré du projet:

La compilation résout et valide toutes les définitions et références de variables. La liaison se produit également au moment de la compilation; la liaison résout et valide toutes les importations et exportations de modules.

Vous pouvez voir que l'implémentation ES6 de Babel n'en est pas trop satisfait.

3
Estus Flask