ES6-Module im Browser: Nicht erfasster Syntaxfehler: Unerwarteter Token-Import

85

Ich bin neu in ES6 (ECMAScript 6) und möchte das Modulsystem im Browser verwenden. Ich habe gelesen, dass ES6 von Firefox und Chrome unterstützt wird, erhalte jedoch den folgenden Fehlerexport

Uncaught SyntaxError: Unexpected token import

Ich habe eine test.html-Datei

<html>
    <script src="test.js"></script>
<body>
</body>
</html>

und eine test.js Datei

'use strict';

class Test {

    static hello() {
        console.log("hello world");
    } 
}

export Test;

Warum?

javascript html ecmascript-6 module es6-modules cdarwin
quelle
ES6- Module werden im Browser noch nicht unterstützt. Außerdem laden Sie immer noch ein Skript, kein Modul.
Bergi
3
Ich verstehe immer noch nicht den Unterschied zwischen einem Skript und einem Modul
cdarwin
Siehe hier
Bergi
20
Der wichtige Teil, den ich bemerkt habe, ist <script type="module"></script>sicherzustellen, dass Sie hinzufügen, dass Sie sonst diesen Fehler erhalten. Ich schlug ständig mit dem Kopf gegen die Wand und tat <script>import ... </script>wissentlich, dass Chrome jetzt ES6-Module ohne Flags unterstützen soll. Dann bemerkte ich, dass das type-Attribut benötigt wurde, um dem Browser anzugeben, dass es sich um ein ES6-Modul handelt, ohne das Sie genau das erhalten Error.
Emmanuel Mahuni
1
Ich verwende Chrome 68, ich sehe diesen Fehler immer noch, wenn wir import * from
Integration verwenden.

Antworten:

66

Viele moderne Browser unterstützen jetzt ES6-Module. Solange Sie Ihre Skripte (einschließlich des Einstiegspunkts in Ihre Anwendung) importieren, <script type="module" src="...">funktioniert dies.

Weitere Informationen finden Sie unter caniuse.com : https://caniuse.com/#feat=es6-module

vullnetyy
quelle
53

Sie können ES6-Module in Google Chrome Beta (61) / Chrome Canary ausprobieren.

Referenzimplementierung von ToDo MVC durch Paul Irish - https://paulirish.github.io/es-modules-todomvc/

Ich habe grundlegende Demo - 

//app.js
import {sum} from './calc.js'

console.log(sum(2,3));

//calc.js
let sum = (a,b) => { return a + b; }

export {sum};

<html> 
    <head>
        <meta charset="utf-8" />
    </head>

    <body>
        <h1>ES6</h1>
        <script src="app.js" type="module"></script>
    </body>

</html>

Ich hoffe es hilft!

Roopesh Reddy
quelle
33
Das ist richtig ... Der wichtige Teil, den ich bemerkt habe, ist <script type="module"></script>sicherzustellen, dass Sie hinzufügen, dass Sie sonst diesen Fehler erhalten. Ich schlug ständig mit dem Kopf gegen die Wand und tat <script>import ... </script>wissentlich, dass Chrome jetzt ES6-Module ohne Flags unterstützen soll. Dann bemerkte ich, dass das type-Attribut benötigt wurde, um dem Browser anzugeben, dass es sich um ein ES6-Modul handelt.
Emmanuel Mahuni
1
{"message": "Ungefangener Syntaxfehler: Unerwartetes Token {", "Dateiname": " stacksnippets.net/js ", "lineno": 24, "colno": 8}
hoogw
4
Ich habe oben Fehler erhalten, indem ich Ihr Code-Snippet oben ausgeführt habe. Verwenden Sie Chrome V67. Warum?
Hoogw
@hoogw Stackoverflow fügte hinzu, dass Code-Snippet automatisch ausführen. Dieser Code kann nicht so ausgeführt werden, wie er ist. Sie müssen den Code in die Datei index.html kopieren und die oben gezeigten .js-Dateien trennen und im Browser ausprobieren!
Roopesh Reddy
Vielen Dank für die nützliche Antwort. Ich habe den Snippet Runner für dich entfernt. (Wie ich gesehen habe, können StackOverflow-Snippets nicht mehr als eine jsQuelle haben).
Mir-Ismaili
25

Leider werden Module derzeit von vielen Browsern nicht unterstützt.

Diese Funktion wird derzeit erst nativ in Browsern implementiert. Es ist in vielen Transpilern wie TypeScript und Babel sowie in Bundlern wie Rollup und Webpack implementiert.

Gefunden auf MDN

t3h2mas
quelle
Ich habe gelesen, dass diese Funktion in einer Sof-Frage implementiert wurde, aber die MDN-Quelle ist tatsächlich zuverlässiger.
Cdarwin
Laut folgendem Link sollte Chrome 61 den Import unterstützen - das tut es nicht. medium.com/dev-channel/…
Marc
4
Sie müssen Ihrem Skript-Tag type = "module" hinzufügen.
Smohadjer
10

es hat bei mir funktioniert, indemtype="module" ich importmeine mjs zum Skript hinzugefügt habe:

<script type="module">
import * as module from 'https://rawgit.com/abernier/7ce9df53ac9ec00419634ca3f9e3f772/raw/eec68248454e1343e111f464e666afd722a65fe2/mymod.mjs'

console.log(module.default()) // Prints: Hi from the default export!
</script>

Siehe Demo: https://codepen.io/abernier/pen/wExQaa

abernier
quelle