Wie erhalten ES6/2015 Importe/Module in Browsern?

Ich kann nicht scheinen ES6/2015 imports zu arbeiten. Von this Understanding ECMAScript 6 book, ich verstehe, muss ich meine <script> Tags mit einem type Attribut modules schreiben:Wie erhalten ES6/2015 Importe/Module in Browsern?

<script type="module" src="module.js"></script>

Dann kann ich import innerhalb module.js verwenden. Es funktioniert jedoch nicht mit dem neuesten Firefox (v48.0.1) und Chrome (v53.0.2785.89). Nichts wird auf der Konsole geloggt, wenn ich eine console.log Anweisung in module.js setze.

Wie kann ich den Importmechanismus von ES2015 in einem Browser verwenden (nativ, ohne etwas wie babel/webpack zu verwenden)?

UPDATE: Sieht aus wie Microsoft's Edge browser supports modules, zumindest in der experimentellen Modus. Warum unterstützen andere Browser es dann noch nicht, zumindest im experimentellen Modus?

Quelle

2016-09-06 at.

ES6-Module werden in Browsern noch nicht unterstützt. – loganfsmyth

Sie ... können nicht. Warte auf die Laufzeiten, um es zu unterstützen und benutze Webpack in der Zwischenzeit. – ssube

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import noch keine Unterstützung –

Sie können nicht. Die Syntax und der Vertrag wurden in der ECMAScript-Spezifikation definiert, aber keine Implementierung in einer größeren Laufzeit.

Bis einige Plattform bietet ein eingebautes System Objekt und das zugehörige Modul laden, stecken Sie mit Webpack oder etwas ähnlich zu Polyfill fest.

Auch wenn dies auf der Seite des Browsers als eine dramatische Auslassung erscheinen mag, ist die Funktion einfach genug, um sie zu füllen.

Quelle

2016-09-06 20:09:05 ssube

Gibt es dafür eine gute Polyfill-Bibliothek? –

Ich glaube, sowohl [Webpack 2] (http://stackoverflow.com/questions/36103641/dynamic-system-import-with-webpack) und [SystemJS] (https://github.com/systemjs/systemjs) unterstützen die "System" -Objekt und die meisten Funktionen darauf. Sie sind leider viel schwerer als nur ein Polyfill. – ssube

Eigentlich shiped Webpack "System.import" bei * Zeit der Übertragung * i.s.o bei * Laufzeit *. Also schauen intern Module in Ihren bundle.js Modulen nach 'System.import' (oder' import'), aber von außen wird Ihnen das nicht weiterhelfen. Zur Laufzeit sehen Sie immer noch kein 'System.import'-Objekt, mit dem Sie interagieren können. –

Momentan werden die ES6-Funktionen import und export nicht nativ von einem Browser unterstützt (siehe https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export für weitere Informationen).

Sie müssen einen Compiler verwenden, der Ihren Code mit diesen Schlüsselwörtern konvertiert, einer der am häufigsten verwendeten und verwendeten ist babel.

Quelle

2016-09-06 20:09:23 ClementNerma

Ich bin bewusst von Babel, wie ich in der Frage erwähnt habe. Seltsam, dass es schien, als ob moderne Browser fast 100% auf ES6/2015 waren (zumindest nach https: // kangax.github.io/compat-table/es6/) –

Der ES2015-Standard definiert die Syntax und Semantik des Imports und Exports von Variablen, definiert jedoch nicht, wo Module tatsächlich geladen werden können. Ich glaube, das ist Teil eines kommenden HTML/DOM-Standards. – AgentME

Wie erhalten ES6/2015 Importe/Module in Browsern?

Antwort

Verwandte Themen