Wie funktioniert es6 Modul laden

Question

Ich bin gewesen readingaboutes6 module loaders und ich verstehe einfach nicht ganz, wie es funktioniert und hoffe, dass jemand mich erleuchten kann.

In dem praktischen Workflows verknüpfen über sie ein Beispiel wie dieses

System.import('app/app').then(function(app) { 
    // app is now the Module object with exports as getters 
}); 

kein Problem damit haben - ich verstehe. Aber dann sehe ich Sachen wie diese

var $ = require('jquery'); 

und wirklich verwirrt werden. Was passiert, wenn jquery zum Zeitpunkt des Aufrufs noch nicht in den Browser übertragen wurde? Dreht sich der Thread nur? Analysiert der Browser das Skript hinter den Kulissen und wandelt es wie RequireJs in einen Callback um? Ist das konfigurierbar? Gibt es bestimmte Einschränkungen?

Kann mir jemand einen Überblick geben?

Answer 1

Der ES6-Modullader ruft die Quelle ab, ermittelt Abhängigkeiten und wartet, bis diese Abhängigkeiten geladen sind, bevor das Modul ausgeführt wird. Wenn die Anforderung ausgeführt wird, befindet sich die Abhängigkeit bereits dort und wartet darauf, ausgeführt zu werden.

Wenn wir CommonJS über einen ES6-Modullader laden, müssen wir statisch die require-Anweisungen von der Quelle analysieren und nur die Quelle ausführen, wenn diese benötigt wurden.

Auf diese Weise können wir CommonJS im dynamisch geladenen Browser unterstützen. Zirkelbezüge werden genauso behandelt wie im Knoten.

Die regulären Ausdrücke, die das Request analysieren, sind eigentlich ziemlich zuverlässig und schnell, wobei Kommentare und umgebende Tokens berücksichtigt werden. Siehe https://github.com/systemjs/systemjs/blob/master/lib/extension-cjs.js#L10 für den von SystemJS verwendeten.

Es gibt eine verbleibende Einschränkung mit diesem Ansatz und das ist dynamisch und bedingte CommonJS benötigt wie if (condition) require('some' + 'name') nicht richtig erkannt werden. Dies ist jedoch ein notwendiger Aufwand, um CommonJS als vollständig asynchrones Modulformat im Browser zu verhalten.