Wird beim Importieren des ES6-Moduls der Code in der importierten Datei ausgeführt?

Lesezeit: 3 Minuten

Benutzer-Avatar
mbezad

Wird der Code in der js-Datei während des Imports ausgeführt? wenn ja, dann einmal oder jedes mal? z.B

// a.js
console.log("A");
const a = "a"; 
export default a;

// b.js
import a from "./a"; // => console logs?

// c.js
import a from "./a"; // => console logs again?

Ja, genau einmal.

Sehen http://www.ecma-international.org/ecma-262/6.0/#sec-abstract-module-records:

Nichts unternehmen, wenn dieses Modul bereits evaluiert wurde. Ansonsten alle Modulabhängigkeiten dieses Moduls transitiv auswerten und dann dieses Modul auswerten

  • ich konnte es nur in kombination mit webpack testen. ist die Ausführung das Standardverhalten des Browsers (definiert in den Spezifikationen). und wäre dies in Ordnung oder ist es ein Anti-Pattern? (Danke, ich habe die Klammer korrigiert)

    – mbehzad

    19. Mai 2016 um 14:12 Uhr

  • @user2520818: “Nichts tun, wenn dieses Modul bereits evaluiert wurde. Ansonsten alle Modulabhängigkeiten dieses Moduls transitiv evaluieren und dann dieses Modul evaluieren.” ecma-international.org/ecma-262/6.0/…

    – Felix Klinge

    19. Mai 2016 um 17:07 Uhr

  • Es ist kein Web Pack erforderlich, um dies zu testen. Sie könnten es beispielsweise einfach mit babel-node ausführen. Es ist kein Anti-Pattern. Es ist einfach so, wie es funktioniert. Es kann im Moment in Ihrem bevorzugten Browser funktionieren oder nicht, aber jede Umgebung, die es ausführt, wird es auf diese Weise ausführen.

    Benutzer663031

    19. Mai 2016 um 17:23 Uhr


  • Danke @FelixKling, habe deinen Link schamlos geklaut.

    Benutzer663031

    19. Mai 2016 um 17:25 Uhr

  • Es gibt einen Unterschied zwischen “Warum versuchst du es einfach und es macht rum” vs. “Dieses Verhalten tritt garantiert jedes Mal ohne Ausnahme auf” 😉

    – Ryan Taylor

    23. Juli 2019 um 17:06 Uhr

Benutzer-Avatar
andyhasit

Ein Modul wird nur einmal bewertet aber Es ist möglich, zwei Kopien desselben Moduls in einem Projekt zu installieren, in diesem Fall werden dieses Modul und der darin enthaltene Code zweimal ausgeführt.

Betrachten Sie die folgende Paketstruktur:

index.js
package.json
node_modules/
├── package_b/
│   └── node_modules/
│       └── package_a/
|           └── index.js
└── package_c/
    └── node_modules/
        └── package_a/
            └── index.js

Wenn die oberste Ebene index.js importiert aus Paket_b und Paket_cdann Paket_a wird importiert (und damit ausgewertet) zweimal.

Die meisten Menschen sind sich dieses Verhaltens nicht bewusst, müssen es aber wahrscheinlich sein, wenn sie auf diese spezielle Frage gestoßen sind.

Hier ist ein alter, aber guter Artikel auf Verständnis-des-npm-Abhängigkeitsmodells mit weiteren Einzelheiten darüber, wie und warum npm dies tut.

  • Ich denke, diese Antwort ist irreführend und falsch. Die anwendbare Spezifikation mit dem Titel der Frage ist ECMAScript 6, nicht “das npm-Abhängigkeitsmodell”. Speziell Modul Semantik und HostResolveImportedModule. Und sogar für npmvon dem der verlinkte Artikel spricht Kopien von Modulen (z. B. verschiedene Versionen, auf verschiedenen Pfaden, die in einer eigenen Sandbox laufen). Also auch für npm derselbe Modulcode wird nicht zweimal ausgeführt.

    – Inigo

    7. Januar um 4:16

  • @Inigo ES6 Ich glaube, Sie haben die Antwort falsch verstanden, denn sie ist zumindest mit den neuesten Versionen zum Zeitpunkt des Schreibens korrekt. In Bezug auf den Umfang wird ES6 überwiegend in einer Node+npm-Umgebung verwendet, in der die akzeptierte Antwort gefährlich falsch ist, daher ist dies eine absolut gültige und hilfreiche Antwort. Denken Sie daran, der Zweck dieser Seite ist es, sich gegenseitig zu helfen, Probleme zu lösen oder zu vermeiden 😉

    – andyhasit

    8. Januar um 17:18 Uhr

Falls jemand TypeScript mit verwendet "module": "es6" und fragen sich, wie das geht, verwenden Sie die globalThis Stichwort:

function outputMsg(msg: string) : void {
    console.log(msg);
}

// export function for global scope
globalThis.outputMsg = outputMsg;

und dann anrufen outputMsg("my console output") wie üblich in der Chrome DevTools-Konsole und es sollte Ihre Funktion automatisch vervollständigen und ausführen.

Sie könnten Ihren “globalen Export” auch umbenennen:

globalThis.myCrazyFunc = outputMsg;

und Ruf an myCrazyFunc("crazy message") in der Konsole.

1227470cookie-checkWird beim Importieren des ES6-Moduls der Code in der importierten Datei ausgeführt?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy