Moduły ES6 w przeglądarce: Uncaught SyntaxError: Nieoczekiwany import tokenu

85

Jestem nowy w ES6 (ECMAScript 6) i chciałbym używać jego systemu modułów w przeglądarce. Czytałem, że ES6 jest obsługiwany przez przeglądarki Firefox i Chrome, ale pojawia się następujący błąd podczas używaniaexport

Uncaught SyntaxError: Unexpected token import

Mam plik test.html

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

i plik test.js

'use strict';

class Test {

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

export Test;

Czemu?

javascript html ecmascript-6 module es6-modules cdarwin
źródło
Moduły ES6 nie są jeszcze obsługiwane w przeglądarce. Nadal ładujesz skrypt, a nie moduł.
Bergi
3
Nadal nie rozumiem różnicy między skryptem a modułem
cdarwin
Zobacz tutaj
Bergi
20
Ważną częścią, na którą zwróciłem uwagę, jest <script type="module"></script>upewnienie się, że dodasz, że w przeciwnym razie otrzymasz ten błąd. Uderzałem głową w ścianę bez przerwy robiąc <script>import ... </script>świadomie, że teraz mówi się, że chrome obsługuje moduły ES6 bez flag, potem zauważyłem, że atrybut type był potrzebny, aby wskazać przeglądarce, że jest to moduł ES6, bez którego dokładnie to uzyskasz błąd.
Emmanuel Mahuni
1
Używam Chrome 68, nadal widzę ten błąd, gdy używamy importu * z
Integracja

Odpowiedzi:

66

Wiele nowoczesnych przeglądarek obsługuje teraz moduły ES6. O ile importujesz swoje skrypty (w tym punkt wejścia do aplikacji) przy użyciu<script type="module" src="..."> nich będzie działać.

Zajrzyj na caniuse.com, aby uzyskać więcej informacji: https://caniuse.com/#feat=es6-module

vullnetyy
źródło
53

Możesz wypróbować moduły ES6 w Google Chrome Beta (61) / Chrome Canary.

Implementacja referencyjna ToDo MVC autorstwa Paula Irisha - https://paulirish.github.io/es-modules-todomvc/

Mam podstawowe 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>

Mam nadzieję, że to pomoże!

Roopesh Reddy
źródło
33
Zgadza się ... Ważną rzeczą <script type="module"></script>, którą zauważyłem, jest upewnienie się, że dodasz, że w przeciwnym razie otrzymasz ten błąd. Uderzałem głową w ścianę, ciągle <script>import ... </script>wiedząc, że teraz mówi się, że chrome obsługuje moduły ES6 bez flag, a potem zauważyłem, że atrybut type był potrzebny, aby wskazać przeglądarce, że jest to moduł ES6.
Emmanuel Mahuni
1
{"message": "Uncaught SyntaxError: Nieoczekiwany token {", "filename": " stacksnippets.net/js ", "lineno": 24, "colno": 8}
hoogw
4
Otrzymałem powyższy błąd, uruchamiając powyższy fragment kodu, użyj chrome v67, dlaczego?
hoogw
@hoogw Stackoverflow dodał to Uruchom fragment kodu automatycznie. Tego kodu nie można wykonać w takiej postaci, w jakiej jest. Musisz skopiować kod do index.html i oddzielić pliki .js, jak pokazano powyżej, i spróbować w przeglądarce!
Roopesh Reddy
Dziękuję przydatnej odpowiedzi. Usunąłem dla ciebie skrawek runnera. (Jak widziałem, fragmenty StackOverflow nie mogą mieć więcej niż jednego jsźródła).
Mir-Ismaili
25

Niestety, wiele przeglądarek nie obsługuje obecnie modułów.

Obecnie ta funkcja dopiero zaczyna być implementowana w przeglądarkach natywnie. Jest zaimplementowany w wielu transpilerach, takich jak TypeScript i Babel, oraz w pakietach, takich jak Rollup i Webpack.

Znaleziono na MDN

t3h2mas
źródło
Czytałem, że ta funkcja została zaimplementowana w pytaniu Sof, ale źródło MDN jest w rzeczywistości bardziej niezawodne.
cdarwin
Zgodnie z poniższym linkiem Chrome 61 powinien obsługiwać import - nie. medium.com/dev-channel/…
Marc
4
Musisz dodać type = "module" do swojego tagu skryptu.
smohadjer
10

zadziałało dla mnie, dodająctype="module" do skryptu importmoje mjs:

<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>

Zobacz demo: https://codepen.io/abernier/pen/wExQaa

abernier
źródło