So verwenden Sie ES6-Module über die Dev-Tools-Konsole

Wenn ich ein ES6-Modul erstelle, kann ich es meines Wissens nur aus Code importieren, der selbst ein Modul ist. Dies bedeutet, dass Nicht-Modulcode, z. B. Inline-Javascript, oder die Chrome Dev Tools-Konsole niemals auf Code zugreifen können, der sich in einem Modul befindet.

Ist das wahr? Gibt es eine Möglichkeit, dies zu umgehen, denn es scheint eine ziemlich extreme Einschränkung zu sein?

Sie können verwenden dynamischer Import in der Chrome-Konsole.

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

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

Sie können die Funktion oder Variable mit einer Zeile wie im globalen Namensraum registrieren window.myFunction = myFunction oder window.myVariable = myVariable. Sie können dies im Modul tun, wo myFunction oder myVariable deklariert werden oder dies in einem separaten Modul tun, in das sie importiert wurden.

Sobald Sie dies getan haben, können Sie es verwenden myFunction Und myVariable über die Chrome DevTools-Konsole.

Zum Beispiel:

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

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

(Dank an @Evert, dass er diese Lösung in einem Kommentar bereitgestellt hat, wenn auch auf eher umständliche Weise, für die ich eine Weile gebraucht habe, um sie herauszufinden.)

Du kannst erwarten A dynamischer Import in der Chrome-Konsole:

const Module = await import('./path/to/module.js')
Module.doSomething()

Dieser dynamische Import entspricht in etwa:

import * as Module from './path/to/module.js';
Module.doSomething()

Es gibt eine Möglichkeit, die Chrome Dev Tools mit ES6-Modulen zu verwenden, sofern Sie diese verwenden VSCode und das Javascript-Debugger für Chrome. Ich hatte einige Mühe, es zum Laufen zu bringen, aber es hat sich gelohnt.
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Der VSCode-Debugger startet ein neues Chrome-Fenster, das mit dem VSCode-Debugger verbunden ist. Sie können in diesem Fenster auch wie gewohnt Chrome Dev Tools (F12) verwenden. Es funktioniert mit ES6-Modulen und Sie können Haltepunkte setzen, die Konsole verwenden, Variablen überprüfen usw.

Falls Sie Probleme beim Einrichten des Debuggers haben, funktioniert es bei mir folgendermaßen:

• Gehen Sie zum VSCode-Debug-Fenster (CTRL+SHIFT+D) -> auswählen Add Configuration Aus Dropdown -> Auswählen Chrome Launch oder Chrome Launch Legacy „launch.json“ ändern

meine launch.json:

{
  "name": "Launch Chrome Legacy",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:5000/auth/login",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true
},
{
  "name": "Launch Chrome",
  "request": "launch",
  "type": "pwa-chrome",
  "url": "http://localhost:5000/auth/login",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true
},

Der Schlüssel lag in der Verwendung "sourceMaps": true Und "url": "http://localhost:5000/auth/login" anstatt http://localhost:5000/blog", das ist die Seite, die ich eigentlich debuggen möchte. Als der Debugger jedoch das neue Chrome-Fenster öffnete, wurde meine Seite weitergeleitet /auth/loginalso musste ich diese URL verwenden.

• Sie können versuchen, die Vorschauversion des neuen Debuggers zu deaktivieren und die zu verwenden Legacy Version stattdessen: Ausschalten Debug › JavaScript: Use Preview in den VSCode-Einstellungen.
• Dann renne Launch Chrome Legacy aus dem Debug-Fenster in VSCode
• Um Haltepunkte in VSCode festzulegen, öffnen Sie das Javascript-Modul von Loaded Scripts

Sie können Funktionen, die in Javascript-Modulen enthalten sind, über die Chrome-Entwicklerkonsole aufrufen, indem Sie den Import verwenden, wie in der Antwort von @Kin.

Wenn Sie die Fehlermeldung „TypeError: Modulspezifizierer konnte nicht aufgelöst werden“ erhalten, versuchen Sie, die vollständige URL für die Moduldatei zu verwenden. Unter Windows 10 mit lokal ausgeführtem IIS und Chrome 87 funktioniert dies beispielsweise für mich:

// Call doSomething(), an exported function in module file mymodule.js
import('http://localhost/mysite/myfolder/mymodule.js').then((m) => { m.doSomething(); });

Einige etwas ergonomischere Versionen mit Übereinstimmung zwischen den verschiedenen Importarten:

// import { namedExport1, namedExport2 } from 'https://example.com/lib.js'
const { namedExport1, namedExport2 } = await import('https://example.com/lib.js')

// import defaultExport from 'https://example.com/lib.js'
const { default: defaultExport } = await import('https://example.com/lib.js')

// import * as mod from 'https://example.com/lib.js'
const mod = await import('https://example.com/lib.js')

Sie können ein Modul nur aus anderen Modulen importieren, weil import ist eine Modulfunktion.

Wie haben Sie vor ES6 Module „importiert“? Du hast es nicht getan, weil es nicht existierte. Sie können tatsächlich mit einem E6-Modul genauso interagieren, wie Sie es mit der Interaktion zwischen zwei unabhängigen Nicht-Modul-Skripten getan haben.