Der ES2015-Import funktioniert in Firefox nicht (auch nicht auf oberster Ebene)

87

Dies sind meine Beispieldateien:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="t1.js"></script>
</head>
<body></body>
</html>

t1.js:

import Test from 't2.js';

t2.js:

export const Test = console.log("Hello world");

Wenn ich die Seite in Firefox 46 lade, wird "SyntaxError: Importdeklarationen werden möglicherweise nur auf der obersten Ebene eines Moduls angezeigt" zurückgegeben. Ich bin mir jedoch nicht sicher, wie viel mehr oberste Ebene die Importanweisung hier erhalten kann. Ist dieser Fehler ein roter Hering und wird Import / Export einfach noch nicht unterstützt?

javascript html firefox ecmascript-6 es6-modules Christoph Burschka
quelle
2
ES6-Module werden in Browsern noch nicht unterstützt.
Felix Kling
2
Nicht wahr Felix. Nicht einmal im Jahr 2016. Nicht von "allen" Browsern unterstützt wäre genauer.
Andrew S

Antworten:

126

Der Fehler, den Sie erhalten haben, war, dass Sie explizit angeben müssen, dass Sie ein Modul laden - nur dann ist die Verwendung von Modulen zulässig:

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

Ich habe es in diesem Dokument über die Verwendung des ES6-Imports im Browser gefunden . Literatur-Empfehlungen.

Vollständig unterstützt in diesen Browserversionen (und höher; vollständige Liste auf caniuse.com ):

  • Firefox 60
  • Chrome (Desktop) 65
  • Chrome (Android) 66
  • Safari 1.1

In älteren Browsern müssen Sie möglicherweise einige Flags in Browsern aktivieren:

  • Chrome Canary 60 - hinter der Flagge der Experimental Web Platform in chrome:flags.
  • Firefox 54 - dom.moduleScripts.enabledEinstellen about:config.
  • Rand 15 - hinter der Einstellung Experimentelle JavaScript-Funktionen in about:flags.
Tomáš Zato - Monica wieder einsetzen
quelle
1
Vielen Dank; Dies scheinen neue Informationen zu sein (vergleichen Sie die Browser-Support-Tabelle der vorherigen Antwort mit developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… ), daher wechsle ich zu Ihrer Antwort, da diese importnicht mehr unterstützt wird.
Christoph Burschka
1
Arbeiten jetzt ohne Flags / Einstellungen in Edge 16299 und Chrome 64. Eine Einschränkung muss Pfad importieren, nicht Datei, also in t1.js: import Test from './t2.js';
Catweazle
@Catweazle Bist du sicher, dass es ist './t2.js'und nicht './t2'ohne .js?
Fredoverflow
@fredoverflow Ja, im Gegensatz zu Node.js muss der vollständige Name angegeben werden.
Tomáš Zato - Wiedereinsetzung Monica
braucht ein vollständiges Beispiel, nicht nur den Import
Bharal
13

Das ist nicht mehr richtig. Alle aktuellen Browser unterstützen jetzt ES6-Module

Ursprüngliche Antwort unten

Von importauf MDN :

Diese Funktion ist derzeit in keinem Browser nativ implementiert. Es ist in vielen Transpilern wie dem Traceur Compiler, Babel oder Rollup implementiert.

Browser unterstützen nicht import.

Hier ist die Browser-Support-Tabelle:

Geben Sie hier die Bildbeschreibung ein

Wenn Sie ES6-Module importieren möchten, würde ich die Verwendung eines Transpilers (z. B. babel ) vorschlagen .

Josh Beam
quelle
Können Sie diese Funktionen mithilfe einer Flagge (z. B. in Chrom) aktivieren?
Evolutionxbox
4
@evolutionxbox: Wenn die Funktionen nicht impelementiert sind , gibt es auch kein Flag.
Bergi
1
Wenn die Funktionen nicht implementiert sind, warum erhalte ich dann weder einen Syntaxfehler noch einen Fehler, der mir mitteilt, dass sie nicht implementiert sind? Das macht keinen Sinn.
Tomáš Zato - Wiedereinsetzung Monica
@ TomášZato, hängt nur davon ab, welchen Browser Sie verwenden, um damit umzugehen
Josh Beam
1
Eigentlich gab es einen Fehler in meinem Code und es funktioniert einwandfrei. Ich bin mir nicht sicher, warum Ihre Antwort positiv bewertet wurde. Browser, die Importe nicht unterstützen, melden dies. Fehler wie der fragliche sind tatsächliche Fehler beim Importieren.
Tomáš Zato - Wiedereinsetzung Monica
1

Nur die Verwendung der Dateierweiterung .js beim Importieren von Dateien löste das gleiche Problem (vergessen Sie nicht, das type="moduleSkript-Tag festzulegen ).

Schreiben Sie einfach:

import foo from 'foo.js';

anstatt

import foo from 'foo';
krmld
quelle
0

Sie müssen angeben, dass der Typ im Skript eingegeben werden soll, und der Export muss die Standardeinstellung sein.

<script src='t1.js' type='module'>

Verwenden Sie für t2.js nach dem Export die Standardeinstellung wie folgt, exportieren Sie die Standardeinstellung "Hier geht Ihr Ausdruck" (hier können Sie keine Variablen verwenden) . Sie können die folgende Funktion verwenden:

export default function print(){ return console.log('hello world');}

und für den Import sollte Ihre Importsyntax wie folgt lauten : Importieren Sie den Druck aus './t2.js' (verwenden Sie die Dateierweiterung und ./ für dasselbe Verzeichnis). Ich hoffe, dies wäre nützlich für Sie!

SK Biswas
quelle
0

Aus Gründen der Argumentation ...

Man könnte dem globalen Fensterobjekt eine benutzerdefinierte Modulschnittstelle hinzufügen. Es wird jedoch nicht empfohlen. Andererseits ist das DOM bereits kaputt und nichts bleibt bestehen. Ich benutze dies die ganze Zeit, um dynamische Module zu laden und benutzerdefinierte Listener zu abonnieren. Dies ist wahrscheinlich keine Antwort - aber es funktioniert. Der Stapelüberlauf hat jetzt ein module.export, das ein Ereignis namens 'Spork' aufruft - zumindest bis zur Aktualisierung ...

//  spam the global window with a custom method with a private get/set-interface and     error handler... 

window.modules = function(){
  window.exports = {
    get(modName) {
      return window.exports[modName] ? window.exports[modName] : new Error(`ERRMODGLOBALNOTFOUND [${modName}]`)
    },
    set(type, modDeclaration){
      window.exports[type] = window.exports[type] || []
      window.exports[type].push(modDeclaration)

    }
  }

}

//  Call the method
window.modules()

//  assign a custom type and function
window.exports.set('Spork', () => console.log('SporkSporSpork!!!'))


// Give your export a ridiculous event subscription chain type...
const foofaalala = window.exports.get('Spork')

// Iterate and call (for a mock-event chain)
foofaalala.forEach(m => m.apply(this))

//  Show and tell...
window
Paul Fabing
quelle