Welche Browser unterstützen den import und export syntax für ECMAScript 6?

Ich bin derzeit am schreiben einer web-Anwendung mit dem MEAN Stack, und bin versucht zu schreiben von code in ECMAScript 6 JavaScript; allerdings bin ich immer Fehler in Chrome und Firefox bei der Verwendung von import-und export-syntax. Gibt es derzeit irgendwelche Browser, die voll-Unterstützung von ECMAScript 6?

Bitte beachtet: ich bin nicht zu Fragen, wenn ECMAScript 6 wird unterstützt von den Browsern. Ich bin zu Fragen, welche Browser unterstützen ECMAScript 6 import-und export-syntax. Sehen https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla#Features_not_yet_supported_by_Firefox

stackoverflow.com/questions/13355486/...
Aber die Antwort in dieser Frage, die links zu einer fantastische up-to-date resource.
Es scheint, import und export fehlen von dieser Seite aus. Ich habe allerdings verbunden mit der MDN Kompatibilitätstabelle für speziell die oben genannte Funktion. Kurz: kein browser voll unterstützt ES6 an dieser Stelle und anscheinend keiner unterstützt den import/export.
Scheint so, als es noch nicht unterstützt, auf jedem browser. Zitat aus der website: "Hinweis: Diese Funktion ist nicht implementiert in jedem Browser nativ in dieser Zeit. Umgesetzt wird es in vielen transpilers, wie der Traceur-Compiler und ES6-Modul Transpiler." developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
Das eigentliche Modul loader ist nicht Teil des ES6-standard, und es gibt derzeit keinen standard, der es. Wenn ein browser kann keine Module laden (nach einem standard) es macht nicht viel Sinn, unterstützt die syntax für Module. Also ich denke, wir werden warten müssen, bis ein standard ist fertig.

InformationsquelleAutor Gregory R. | 2015-11-04

  1. 10

    Chrome und Firefox unterstützen import und export syntax (es gibt tests für richtige analysieren).

    Was nicht unterstützt wird ist das Modul geladen wird - Sie kann nicht geladen werden Modul mit allen Mitteln, weil die Spezifikation es ist noch nicht abgeschlossen. Sie müssen eine Art von Modul bundler. Ich bin nicht auf front-end-developer, aber ich habe gehört, gute Meinungen zu Rollup von meinem Kollegen.

    Webpack, SystemJS, AMD, um nur ein paar zu nennen mehr bundlers 🙂
    Rollup ist der beste (super schnell) und einfachste, mit zu beginnen, und benötigen null lernen. führen Sie einfach den Befehl ein und es funktioniert. Ich benutze es schon seit über einem Jahr mit großem Erfolg mehrere Projekte, bis hin in den Größen.
    SystemJS ist Modul-loader , und webpack ist Modul-Fehler.. ist mein Verständnis richtig ?
    Was meinst du mit Chrome unterstützen import und export syntax? Ich bin immer Unexpected token export
    Also abwarten, es wird "unterstützt" es kann aber nicht eigentlich ein Kontext? Ist das nicht eine eher lockere Verwendung des Begriffs "unterstützt"?

    InformationsquelleAutor Ginden

  2. 29

    Unterstützt in:

    • Safari 10.1
    • Chrom 61
    • Firefox 54 – hinter dem dom.moduleScripts.aktiviert die Einstellung in about:config.
    • Edge 16
    nice one , vielen Dank für diese
    Nun nativ in Firefox seit v60

    InformationsquelleAutor Ali

  3. 4

    Nun gibt es eine pollyfill, die Sie verwenden können, um zu importieren ES6-Modul.

    Getestet habe ich es erfolgreich auf Chrom.

    Hier ist der link: http://github.com/ModuleLoader/browser-es-module-loader

    Es ist auch implementiert, nativ in Edge 14:

    https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond

    Es gibt einen Grund, die Unterstützung ist sehr begrenzt, aber... ich schreib dir eine Antwort

    InformationsquelleAutor Supersharp

  4. 4

    Wie schon andere gesagt haben, die Unterstützung für Sie ist immer noch sehr begrenzt. Aber selbst wenn es volle Unterstützung.... würde es klug sein, es zu benutzen? Wie würden wir das tun?

    Denken. Ein typisches JS-app geschrieben, mit Node-JS-Module leicht enthält Dutzende, sogar Hunderte von (sehr kleine) Pakete. Wollen wir wirklich, dass viele Anfragen?

    Browserify, Webpack, Rollup usw. sind so beliebt, weil Sie uns ermöglichen, zu bündeln viele kleine Pakete in einer schnellen download. Mit code splitting wir können dem Modul bundler entscheiden, transpilation Zeit, basierend auf der code-unsere Seiten sind eigentlich mit und auf einige Konfigurationseinstellungen, wie viele Pakete zu erstellen, und was in jedem von Ihnen. Auf diese Weise können wir schreiben viele kleine Pakete und dienen Sie als ein (paar) big-bundles.

    Mein Punkt ist, dass wir teilen unseren code in Pakete, die gut funktionieren auf einer konzeptionellen Ebene, dann bündeln Sie diese Pakete zu bündeln, die arbeiten auch auf einer technischen (Netzwerk -) Ebene. Wenn wir schreiben unseren code basiert auf einer optimalen Netzwerk-Paketgröße an, die wir am Ende zu opfern Modularität in den Prozess.

    In der Zwischenzeit, es wird wohl nur die Verwirrung. Zum Beispiel, betrachten Sie das Beispiel auf dem Edge-blog:

    import { sum } from './math.js';

    Beachten Sie, wie Sie die Erweiterung .js zu den from string? In Node JS, die wir in der Regel schreiben diese als:

    import { sum } from './math';

    So wird der obige code auch die Arbeit auf der Kante? Und was ist mit genannten Pakete? Ich fürchte, wir werden sehen, eine Menge von Inkompatibilität hier, bevor wir herausfinden, wie wir diese Wege Arbeit auf der ganzen Linie.

    Ich wage zu erraten, dass für die meisten Entwickler System.import bleiben meist unsichtbar in den Browser, und dass nur die Bündelung von software wird beginnen, es zu benutzen (für Effizienz-Zwecke), wenn es mainstream wird.

    Beachten Sie, dass die HTTP-v2 bedeutet, dass 1000 von kleinen Anfragen hat nur einen geringen overhead im Vergleich zu der machen 1 groß. Node js ist auch für serverseitige apps und scripts, tools etc., die nicht leiden, die Anfragen Problem (mit der 'import' wäre meist identisch mit 'require' für diese in Bezug auf die Semantik).
    Und wenn man es genauer, Sie werden feststellen, dass tatsächlich, den Knoten zu issues wenn Sie zu viele kleine Pakete. Für große Systeme, die aus Hunderten kleinen Paket, die inital erfordern Baum kann so groß geworden, dass sich (viele) Sekunden der Start-Verzögerung. In der Tat empfehlen einige Leute, Bündelung für die server-Seite (auch für HMR etc).
    alle diese Hunderte von Anfragen Cache. Oder sogar serviceworker-ed.
    Keine Notwendigkeit, Sie zu beleidigen. Es gibt einen Grund, dass in den Leitlinien für progressive web-apps, die Sie empfehlen, dass Sie inline Ihre kritischen styles und JS-code im head des Dokuments. Diese Anforderungen verletzt werden, Ihre Zeit, Um Interaktiv in die Reale Welt. Ja, diese Anfragen werden möglicherweise zwischengespeichert,... dann wieder Sie könnten nicht. Jeder unter perf ernst ist, tun Ihr bestes, um zu minimieren die Anzahl der Anfragen, die Anzahl der roundtrips und payload-Größe pro Anfrage. Denn das ist, was tötet Leistung, wenn Sie nicht beschränken.
    First-layer-inlining ist nötig, um zu verhindern, dass 200 msec Ladezeit leerer Bildschirm. Das ist nur bei der erstmaligen Belastung. Jede andere Anfrage nicht zu erhalten, eingebettet in HTTP 2.0 da gibt ' s Multiplexen. Auch in HTTP 1.0, wenn Sie service-workered, dann sind Sie schon als inline.

    InformationsquelleAutor Stijn de Witt

  5. 0

    Laut Google Javascript Style Guide:

    Nicht verwenden ES6-Module noch (d.h. die export und import keywords),
    als Ihre Semantik sind noch nicht abgeschlossen. Beachten Sie, dass diese Richtlinie
    überprüft werden, sobald die Semantik sind voll-standard.

    //Don't do this kind of thing yet:
//------ lib.js ------
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';

    Jedoch import und export umgesetzt werden, in vielen transpilers, wie der Traceur-Compiler, Babel oder Rollup.

    InformationsquelleAutor Gregory R.

Schreibe einen Kommentar