wake-up-neo.com

Welche Browser unterstützen den Import und Export von ECMAScript 6?

Ich schreibe zurzeit eine Webanwendung mit dem MEAN-Stack und versuche, Code in ECMAScript 6-JavaScript zu schreiben. Bei der Import- und Exportsyntax werden jedoch Fehler in Chrome und Firefox angezeigt. Gibt es derzeit Browser, die ECMAScript 6 vollständig unterstützen?

Bitte beachten Sie: Ich frage nicht, wann ECMAScript 6 von Browsern unterstützt wird. Ich frage, welche Browser die Import- und Exportsyntax von ECMAScript 6 unterstützen. Siehe https://developer.mozilla.org/de/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla#Features_not_yet_supported_by_Firefox

37
Gregory R.

Chrome und Firefox unterstützen die Syntax import und export (es gibt Tests für eigentlicheparsing ). 

Was nicht unterstützt wird, ist das Laden von Modulen. Sie können das Modul auf keinen Fall laden, da die Spezifikation dafür nicht vollständig ist. Sie müssen dafür eine Art Modulbündler verwenden. Ich bin kein Front-End-Entwickler, aber ich habe gute Meinungen zu Rollup von meinen Kollegen gehört.

10
Ginden

Es wird unterstützt in:

  • Safari 10.1  
  • Chrome 61
  • Firefox 54 - hinter der Einstellung dom.moduleScripts.enabled in about: config. 
  • Kante 16
29
Ali

Jetzt gibt es ein pollyfill, mit dem Sie das ES6-Modul importieren können.

Ich habe es erfolgreich auf Chrome getestet.

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


Es ist auch in Edge 14 nativ implementiert:

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

4
Supersharp

Wie andere bereits gesagt haben, ist die Unterstützung dafür immer noch sehr begrenzt. Aber selbst wenn es volle Unterstützung gäbe ... wäre es schlau, es zu nutzen? Wie machen wir das?

Denk darüber nach. Eine typische JS-App, die mit Node-JS-Modulen geschrieben wurde, enthält problemlos Dutzende, sogar Hunderte (sehr kleiner) Pakete. Wollen wir wirklich so viele Anfragen? 

Browserify, Webpack, Rollup usw. sind so beliebt, weil wir viele kleine Pakete zu einem schnellen Download zusammenfassen können. Mit code splitting können wir den Modulbündler zum Zeitpunkt der Transpilierung entscheiden lassen, basierend auf dem Code, den unsere Seiten tatsächlich verwenden, und anhand einiger Konfigurationseinstellungen, wie viele Bundles erstellt werden müssen und welche Elemente in welche eingefügt werden. Auf diese Weise können wir viele small -Pakete schreiben und sie als (einige) große Bundles dienen.

Mein Punkt ist, dass wir unseren Code in Pakete unterteilen sollten, die auf konzeptioneller Ebene gut funktionieren, und diese Pakete dann in Bündeln bündeln, die auf technischer (Netzwerk-) Ebene gut funktionieren. Wenn wir unseren Code basierend auf der optimalen Paketgröße des Netzwerks schreiben, müssen wir letztendlich die Modularität des Prozesses einschränken. 

In der Zwischenzeit wird es wahrscheinlich nur zu mehr Verwirrung führen. Sehen Sie sich beispielsweise das Beispiel im Edge-Blog an:

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

Beachten Sie, wie sie die Erweiterung .js zur from-Zeichenfolge hinzufügen. In Node JS schreiben wir das normalerweise als:

import { sum } from './math';

Wird der obige Code auch auf Edge funktionieren? Und was ist mit benannten Paketen? Ich befürchte, dass wir hier eine Menge Inkompatibilität sehen werden, bevor wir herausfinden, wie diese Pfade auf ganzer Linie funktionieren.

Ich würde vermuten, dass System.import für die meisten Entwickler in den Browsern größtenteils unsichtbar bleibt und nur die Bündelungssoftware selbst (aus Effizienzgründen) verwendet wird, wenn sie zum Mainstream wird.

4
Stijn de Witt

Gemäß Googles Javascript Style Guide

Verwenden Sie noch keine ES6-Module (d. H. Die Schlüsselwörter export und import), da ihre Semantik noch nicht abgeschlossen ist. Beachten Sie, dass diese Richtlinie Wenn die Semantik voll zum Standard geworden ist, werden sie erneut betrachtet.

// 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';

import und export sind jedoch in vielen Transpilern wie Traceur Compiler, Babel oder Rollup implementiert.

0
Gregory R.