web-dev-qa-db-fra.com

Comment utiliser les modules ES6 à partir de la console des outils de développement

Si je comprends bien, si je crée un module ES6, je ne peux l'importer qu'à partir de code qui est lui-même un module. Cela signifie que le code non-module, c'est-à-dire Javascript intégré, ou la console d'outils de développement Chrome dev ne peut jamais accéder au code qui se trouve dans un module.

Est-ce vrai? Y a-t-il un moyen de contourner cela, car cela semble être une limitation assez extrême.

javascriptes6-modules
11
Timmmm

Vous pouvez utiliser importation dynamique dans la console de Chrome.

import('path/to/module.js').then(m => module = m)

// [doSomething] is an exported function from [module.js].
module.doSomething()
9
Kin

Vous pouvez enregistrer la fonction ou la variable dans l'espace de noms global avec une ligne comme window.myFunction = myFunction ou window.myVariable = myVariable. Vous pouvez le faire dans le module où myFunction ou myVariable sont déclarés ou le faire dans un module distinct où ils ont été importés.

Une fois cela fait, vous pourrez utiliser myFunction et myVariable à partir de la console Chrome DevTools.

Par exemple:

import myModule from '/path/to/module.js';
window.myModule = myModule;

// in the console:
myModule.foo();

(Nous remercions @Evert d'avoir fourni cette solution dans un commentaire, quoique d'une manière plutôt détournée qui m'a pris un certain temps à comprendre.)

1
Carl

Vous pouvez uniquement importer un module à partir d'autres modules, car import est une fonctionnalité de modules.

Comment avez-vous "importé" avant les modules ES6? Vous ne l'avez pas fait, car cela n'existait pas. Vous pouvez réellement interagir avec un module E6 de la même manière que vous l'avez utilisé pour interagir entre deux scripts indépendants hors module.

0
Evert